added css flex to Twilio Flex

Pham-dev · Jun 15, 2022 · 1ea1762 · 1ea1762
1 parent 361b0c7
commit 1ea1762
Show file tree

Hide file tree

Showing 5 changed files with 133 additions and 129 deletions.
diff --git a/src/components/CustomPanel2/CustomPanel2.Styles.ts b/src/components/CustomPanel2/CustomPanel2.Styles.ts
@@ -1,90 +1,94 @@
-import styled from '@emotion/styled';
+import styled from "@emotion/styled";
 
-export const CustomPanel2Styles = styled('div')
-  `
-    background: #fff;
-    border-left: 0.5px solid #E5E4E2;
-    padding: 12px;
-    font-size: 12px;
-    width: 1049px;
-    font-family: 'Inter', sans-serif!important;
+export const CustomPanel2Styles = styled("div")`
+  background: #fff;
+  border-left: 0.5px solid #e5e4e2;
+  padding: 12px;
+  font-size: 12px;
+  font-family: "Inter", sans-serif !important;
+  display: flex;
+  height: 100%;
 
-    .scheduler-panes {}
-    
-    .container {
-      display: flex;
-      flex-wrap: wrap;
-      flex-direction: row;
-      padding: 0;
-    }
-    
-    .first-row {
-      display: flex;
-      gap: 22px;
-    }
+  .scheduler-panes {
+  }
 
-    .flex-item {
-    }
+  .container {
+    display: flex;
+    flex-wrap: wrap;
+    flex-direction: row;
+    padding: 0;
+  }
 
-    .flex-col {
-      display: flex;
-      flex-direction: column;
-      // gap: 22px;
-    }
+  .first-row {
+    display: flex;
+    gap: 22px;
+  }
 
-    .flex-row {
-      display: flex;
-      flex-direction: row;
-      justify-content: space-between;
+  .flex-item {
+  }
 
-      // gap: 22px;
-      padding: 12px 0;
-    }
+  .flex-col {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    // gap: 22px;
+  }
 
-    .first-row {
-      display: flex;
-      //gap: 22px;
-      height: 80%;
-    }
+  .flex-row {
+    display: flex;
+    flex-direction: row;
 
-    .scheduler {
-      gap: 22px;
-    }
+    // gap: 22px;
+    padding: 12px 0;
+  }
 
-    .item1 {
-      flex-grow: 2;
-    }
+  .first-row {
+    display: flex;
+    //gap: 22px;
+    height: 80%;
+  }
 
-    .flex-item {
-      
-      flex-grow: 1;
-      flex-basis: calc(100% / 2);
-    }
+  .second-row {
+    flex: 1;
+  }
 
-    .grid-one {
-      margin: 4px;
-      width: 33%;
-    }
-    .grid-two {
-      margin: 4px;
-      width: 33%;
-      flex: 1;
-    }
-    .grid-three {
-      margin: 4px;
-      width: 33%;
-      flex: none;
-    }
-    .grid-four {
-      margin: 4px;
-      width: 100%;
-      height: 100%;
-       flex: none;
-    }
-    .patient-info {
-      color: #606B85;
-      font-weight: 600;
-      font-size: 28px;
-      line-height: 34px;
-    }
-  `;
+  .scheduler {
+    gap: 22px;
+  }
+
+  .item1 {
+    flex-grow: 2;
+  }
+
+  .flex-item {
+    flex-grow: 1;
+    flex-basis: calc(100% / 2);
+  }
+
+  .grid-one {
+    margin: 4px;
+    width: 33%;
+  }
+  .grid-two {
+    margin: 4px;
+    width: 33%;
+    flex: 1;
+  }
+  .grid-three {
+    margin: 4px;
+    width: 33%;
+    flex: none;
+  }
+  .grid-four {
+    margin: 4px;
+    width: 100%;
+    height: 100%;
+    flex: none;
+  }
+  .patient-info {
+    color: #606b85;
+    font-weight: 600;
+    font-size: 28px;
+    line-height: 34px;
+  }
+`;
diff --git a/src/components/CustomPanel2/CustomPanel2.jsx b/src/components/CustomPanel2/CustomPanel2.jsx
@@ -156,7 +156,7 @@ const CustomPanel2 = (props) => {
                 skill={EDUCATION}
               />
             </div>
-            <div className="flex-row">
+            <div className="flex-row second-row">
               {shouldShowTelehealth && (
                 <TelehealthPane nurseName={props.flexInfo.full_name} />
               )}

diff --git a/...mponents/CustomPanel2/Panes/AppointmentSchedulingPane/AppointmentSchedulingPane.Styles.ts b/...mponents/CustomPanel2/Panes/AppointmentSchedulingPane/AppointmentSchedulingPane.Styles.ts
@@ -1,28 +1,30 @@
 import styled from "@emotion/styled";
 
-export const AppointmentSchedulingPaneStyles = styled('div')
-  `
-    color: #fff;
-    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
-    border: 1px solid #E1E3E9;
-    box-sizing: border-box;
-    border-radius: 8px;
-    max-width: 1049px;
-    width: 100%;
-    height: 569px;
-    padding-top: 20px;
-    padding-left: 20px;
+export const AppointmentSchedulingPaneStyles = styled("div")`
+  color: #fff;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+  border: 1px solid #e1e3e9;
+  box-sizing: border-box;
+  border-radius: 8px;
+  max-width: 1049px;
+  width: 100%;
+  height: 100%;
+  padding-top: 20px;
+  padding-left: 20px;
 
-    .title {
-      font-weight: 700;
-      font-size: 14px;
-      line-height: 17px;
-      color: #606B85;
-    }
-    .open-emr {
-      width: 100%;
-      position:relative;
-      height: 530px;
-      overflow-x: scroll;
-    }
-  `;
+  .title {
+    font-weight: 700;
+    font-size: 14px;
+    line-height: 17px;
+    color: #606b85;
+  }
+  .open-emr {
+    width: 100%;
+    position: relative;
+    height: 100%;
+    padding-bottom: 20px;
+    overflow-x: scroll;
+    overflow-y: hidden;
+  }
+`;
diff --git a/src/components/CustomPanel2/Panes/TelehealthPane/TelehealthPane.Styles.ts b/src/components/CustomPanel2/Panes/TelehealthPane/TelehealthPane.Styles.ts
@@ -1,24 +1,24 @@
 import styled from "@emotion/styled";
 
-export const TelehealthPaneStyles = styled('div')
-  ` 
-    width: 440px;
-    height: 569px;
-    border: 1px solid #E1E3E9;
-    box-sizing: border-box;
-    border-radius: 8px;
-    margin-right: 10px;
-    .title {
-      font-size: 14px;
-      color: #606B85;
-      font-weight: 700;
-    } 
-    
-    .telehealth {
-      width: 100%;
-      height: 100%;
-    }
-    position: relative;
-    overflow: hidden;
-    box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
-  `;
+export const TelehealthPaneStyles = styled("div")`
+  width: 440px;
+  border: 1px solid #e1e3e9;
+  box-sizing: border-box;
+  border-radius: 8px;
+  margin-right: 10px;
+  .title {
+    font-size: 14px;
+    color: #606b85;
+    font-weight: 700;
+  }
+  display: flex;
+
+  .telehealth {
+    width: 100%;
+    height: 100%;
+  }
+  position: relative;
+  overflow: hidden;
+  box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px,
+    rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
+`;
diff --git a/src/components/CustomPanel2/Panes/TelehealthPane/TelehealthPane.tsx b/src/components/CustomPanel2/Panes/TelehealthPane/TelehealthPane.tsx
@@ -36,8 +36,6 @@ const TelehealthPane = ({ nurseName }: TelehealthPaneProps) => {
     <TelehealthPaneStyles>
       {passcode && (
         <>
-          {/* <PaneHeader text="Telehealth"/>*/}
-          <p className="title">Telehealth</p>
           <iframe
             className="telehealth"
             allow="camera; microphone"