Merge pull request #103 from kimwunhae/streaming

[Updated] CSS 💀
kimwunhae · Nov 1, 2020 · 7d975d8 · 7d975d8
2 parents b19aa91 + dab7ffa
commit 7d975d8
Show file tree

Hide file tree

Showing 3 changed files with 14 additions and 18 deletions.
diff --git a/src/components/ChatInput.js b/src/components/ChatInput.js
@@ -25,17 +25,17 @@ export default class ChatInput extends React.Component {
             <KeyboardAccessoryView
                 alwaysVisible={true}
                 androidAdjustResize
-                style={{ height: "100%", backgroundColor: "rgba(0, 0, 0, 0)", borderColor: "yellow", borderWidth: 2 }}
+                style={{ height: "100%", backgroundColor: "rgba(0, 0, 0, 0)", }}
                 hideBorder={true}
             >
-                <View style={{ width: "100%", height: 200, borderColor: "red", borderWidth: 2 }}>
+                <View style={{ width: "100%", height: 200, }}>
                     <ChatOutput messages={messages} />
                 </View>
                 <View style={{ width: `${100}%`, flexDirection: "row", alignItems: "center", alignSelf: "baseline" }}>
                     <TextInput
                         ref={r => this.chatInput = r}
                         placeholder="chat"
-                        style={{ zIndex: 2, width: `${75}%`, height: `${45}%`, backgroundColor: 'rgba(255, 255, 255, 0.3)', borderRadius: 25, margin: 15, marginRight: 0, paddingLeft: 13, textAlignVertical: "center" }}
+                        style={{ zIndex: 2, width: `${75}%`, height: `${45}%`, backgroundColor: 'rgba(255, 255, 255, 0.3)', borderRadius: 25, margin: 15, marginRight: 0, paddingLeft: 13, textAlignVertical: "center", color: "#484848" }}
                         onChangeText={e => handleInputValue(e)}
                     />
                     <TouchableOpacity onPress={this.handlePressSend}>

diff --git a/src/components/ChatOutput.js b/src/components/ChatOutput.js
@@ -15,17 +15,13 @@ export default class ChatOutput extends React.Component {
 
     render() {
         return (
-            <ScrollView ref={r => this.scrollView = r} contentContainerStyle={{
-                height: "100%", borderColor: "blue", borderWidth: 2
-            }}>
-                {
-                    this.props.messages.map((message, key) =>
-                        <View key={key} style={{ backgroundColor: 'rgba(0, 0, 0, 0.0)', borderRadius: 15, margin: 5, padding: 5, flexDirection: "row" }}>
-                            <Text style={{ fontWeight: 'bold', fontSize: 16, marginRight: 10 }}>{message[0]}</Text>
-                            <Text>{message[1]}</Text>
-                        </View>
-                    )
-                }
+            <ScrollView ref={r => this.scrollView = r} contentContainerStyle={{ height: `100%` }} >
+                {this.props.messages.map((message, key) =>
+                    <View key={key} style={{ backgroundColor: 'rgba(0, 0, 0, 0.0)', borderRadius: 15, margin: 5, padding: 5, flexDirection: "row" }}>
+                        <Text style={{ fontFamily: "sans-serif-medium", fontSize: 16, marginRight: 10, color: "white" }}>{message[0]}</Text>
+                        <Text style={{ fontFamily: "sans-serif-light", marginLeft: 5, fontSize: 15, color: "white" }}>{message[1]}</Text>
+                    </View>
+                )}
             </ScrollView>
         )
     }

diff --git a/src/pages/Streaming/OnAir/OnAir.js b/src/pages/Streaming/OnAir/OnAir.js
@@ -174,13 +174,13 @@ export default class OnAir extends React.Component {
                         video={{ preset: 1, bitrate: 400000, profile: 0, fps: 30, videoFrontMirror: false }}
                         autopreview={true}
                     />
-                    <View style={{ marginBottom: -10, flexDirection: "row", borderColor: "yellow", borderWidth: 2 }}>
+                    <View style={{ marginBottom: -10, flexDirection: "row", }}>
                         <HeaderBackButton
                             onPress={this.handleGoback}
                             tintColor="slategrey"
                             style={{ padding: 10, }}
                         />
-                        <View style={{ paddingLeft: "20%", flexDirection: "row", borderColor: "blue", borderWidth: 2 }}>
+                        <View style={{ paddingLeft: "45%", paddingTop: "3%", flexDirection: "row", }}>
                             <Icon.Button
                                 name="camera"
                                 onPress={this.handleSwitchCamera}
@@ -204,15 +204,15 @@ export default class OnAir extends React.Component {
                         </View>
                     </View>
                 </View>
-                <View style={{ zIndex: 1, borderColor: "green", borderWidth: 2, height: 300 }} >
+                <FloatingHearts count={count} />
+                <View style={{ zIndex: 1, height: 300 }} >
                     <ChatInput
                         handleInputValue={this.handleInputValue}
                         handleSendChat={this.handleSendChat}
                         handlePressHeart={this.handlePressHeart}
                         messages={messages}
                     />
                 </View>
-                <FloatingHearts count={count} />
             </SafeAreaView >
         )
     }