styled views

darylbg · Aug 23, 2023 · 99fe7bf · 99fe7bf
1 parent 3cd685a
commit 99fe7bf
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 4 deletions.
diff --git a/src/App.jsx b/src/App.jsx
@@ -14,7 +14,7 @@ function App() {
     height: "100%",
     display: "flex",
     alignItems: "center",
-    justifyContent: "center",
+    justifyContent: "space-between",
   };
 
   useEffect(() => {
@@ -36,7 +36,10 @@ function App() {
     <div style={{ height: "100vh" }}>
       <SplitPane split="vertical" sizes={sizes} onChange={setSizes}>
         <Pane minSize={"50%"} maxSize={'95%'}>
-          <div style={{ ...layoutCSS, background: "#1A1A1A" }}>pane1</div>
+          <div style={{ ...layoutCSS, background: "#1A1A1A" }}>
+            <div className="left-view">left view</div>
+            <div className="right-view">right view</div>
+          </div>
           <Footer handleChatToggle={handleChatToggle} />
         </Pane>
         <div style={{ ...layoutCSS, background: "#d5d7d9" }}>

diff --git a/src/icons/carretGreen.svg b/src/icons/carretGreen.svg
diff --git a/src/index.css b/src/index.css
@@ -6,6 +6,16 @@ body {
   overflow: hidden;
 }
 
+/* views */
+
+.left-view,
+.right-view {
+  flex: 1;
+  background-color: #A0A0A0;
+  aspect-ratio: 16/9;
+  margin: 0 3px;
+}
+
 /* chat */
 
 .close-chat-btn {

diff --git a/src/sections/Footer.jsx b/src/sections/Footer.jsx
@@ -12,6 +12,7 @@ import SettingsIcon from "../icons/settings.svg";
 import ShareScreenIcon from "../icons/shareScreen.svg";
 import WhiteboardsIcon from "../icons/whiteboards.svg";
 import CarretIcon from "../icons/carret.svg";
+import CarretGreenIcon from "../icons/carretGreen.svg";
 
 function Footer({handleChatToggle}) {
   return (
@@ -51,8 +52,8 @@ function Footer({handleChatToggle}) {
           <div>
             <img src={ShareScreenIcon}></img>
           </div>
-          <img className="footer-micOff-carretIcon" src={CarretIcon}></img>
-          <p>Share Screen</p>
+          <img className="footer-micOff-carretIcon" src={CarretGreenIcon}></img>
+          <p style={{color: '#28E567'}}>Share Screen</p>
         </div>
         <div
             onClick={handleChatToggle}