From 721c30b367b42de905fbafac3271eabe86c506b1 Mon Sep 17 00:00:00 2001
From: Nicholas Orlowsky <nickorlow@nickorlow.com>
Date: Wed, 25 Jan 2023 15:47:27 -0600
Subject: [PATCH] sizing changes for table

---
 .idea/workspace.xml                     |  2 ++
 src/App.css                             |  2 +-
 src/components/UptimeCard.css           |  1 +
 src/components/UptimeComparisonCard.tsx | 36 ++++++++++++++++---------
 src/components/UptimeLabelCard.tsx      | 24 ++++++++++++-----
 5 files changed, 45 insertions(+), 20 deletions(-)

diff --git a/.idea/workspace.xml b/.idea/workspace.xml
index 98cd7be..82bb8eb 100644
--- a/.idea/workspace.xml
+++ b/.idea/workspace.xml
@@ -4,7 +4,9 @@
     <list default="true" id="03fafda4-e2c1-4602-a731-a2f96e84badd" name="Default Changelist" comment="">
       <change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/App.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/App.css" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/UptimeCard.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeCard.css" afterDir="false" />
       <change beforePath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeComparisonCard.tsx" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/components/UptimeLabelCard.tsx" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
diff --git a/src/App.css b/src/App.css
index f0c0fc3..f175ffe 100644
--- a/src/App.css
+++ b/src/App.css
@@ -64,7 +64,7 @@ p {
   .nws-card-md {
     border-radius: 20px;
     background-color: #eee;
-    padding: .75rem;
+    padding-bottom: 2rem;
   }
 }
 .nws-card {
diff --git a/src/components/UptimeCard.css b/src/components/UptimeCard.css
index da99646..1fc324c 100644
--- a/src/components/UptimeCard.css
+++ b/src/components/UptimeCard.css
@@ -1,6 +1,7 @@
 .uptime-lnk {
     font-weight: bolder;
     color: #2f2f2f;
+    font-size: 1.1rem;
     text-decoration: none;
     transition: .5s;
     cursor: pointer;
diff --git a/src/components/UptimeComparisonCard.tsx b/src/components/UptimeComparisonCard.tsx
index aa4529c..d5f53fb 100644
--- a/src/components/UptimeComparisonCard.tsx
+++ b/src/components/UptimeComparisonCard.tsx
@@ -32,28 +32,38 @@ function getResponseTimeClass(respTime: number) {
 export default function UptimeComparisonCard(props: {uptime: UptimeRecord, isService: boolean}) {
     const [isModalOpen, setModalOpen] = useState(false);
     return(
-        <div className={"col-12 col-md-2 mb-2 p-0 m-0 text-center nws-card-md"}>
-                <div style={{height: 25, margin: 0}} className={"pt-2 pt-md-0"}>
+        <div className={"col-12 col-lg-2 mb-2 p-lg-0 m-lg-0 m-2 text-center nws-card-md"}>
+                <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
                    <h4 className={"uptime-lnk"} onClick={()=>setModalOpen(true)}>{props.uptime.name}</h4>
                 </div>
                 <hr/>
-                <p className={"fw-bold d-md-none"}>Uptime (Last Month)</p>
-                <p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p>
-                <hr className={"d-md-block d-none"}/>
-                <p className={"fw-bold d-md-none"}>Uptime ({new Date().getFullYear()} YTD)</p>
-                <p  className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p>
-                <hr className={"d-md-block d-none"}/>
-                <p className={"fw-bold d-md-none"}>Avg Response Time (24hr)</p>
-                <p  className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p>
-                <hr className={"d-md-block d-none"}/>
-                <p className={"fw-bold d-md-none"}>Current Status</p>
-                <div className={`p-1 d-flex justify-content-start w-100`}>
+                <p className={"fw-bold d-lg-none"}>Uptime (Last Month)</p>
+                <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
+                    <p className={getUptimeClass(props.uptime.uptimeMonth)}>{props.uptime.uptimeMonth}%</p>
+                </div>
+                <hr className={"d-lg-block d-none"}/>
+                <p className={"fw-bold d-lg-none"}>Uptime ({new Date().getFullYear()} YTD)</p>
+                <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
+                    <p  className={getUptimeClass(props.uptime.uptimeYtd)}>{props.uptime.uptimeYtd}%</p>
+                </div>
+                <hr className={"d-lg-block d-none"}/>
+                <p className={"fw-bold d-lg-none"}>Avg Response Time (24hr)</p>
+                <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
+                    <p  className={getResponseTimeClass(props.uptime.averageResponseTime)}>{props.uptime.averageResponseTime}ms</p>
+                </div>
+                <hr className={"d-lg-block d-none"}/>
+                <p className={"fw-bold d-lg-none"}>Current Status</p>
+            <div style={{height: 25, margin: 0}} className={"pt-2 pt-lg-0"}>
+
+                <div className={`p-1 d-flex justify-content-start w-100`} >
                     <p className={`fw-bold severity-label w-100
                                         ${props.uptime.isUp ? 'low' : (props.uptime.undergoingMaintenance ? 'med' : 'high')}-severity`}
                     >
                         {props.uptime.isUp ? 'Up' : (props.uptime.undergoingMaintenance ? 'Maintenance' : 'Down')}
                     </p>
                 </div>
+
+            </div>
                 <Modal className={"uptime-modal"} isOpen={isModalOpen}>
                     <div className={"mb-3"}>
                         <h1 className={"mb-0"}>{props.uptime.name}</h1>
diff --git a/src/components/UptimeLabelCard.tsx b/src/components/UptimeLabelCard.tsx
index 5fce811..ca1c52c 100644
--- a/src/components/UptimeLabelCard.tsx
+++ b/src/components/UptimeLabelCard.tsx
@@ -7,18 +7,30 @@ import Modal from "react-modal";
 export default function UptimeLabelCard() {
 
     return(
-        <div className={"col-2 p-0 d-none d-md-block mb-2 m-0 text-center"}>
+        <div className={"col-2 p-0 d-none d-lg-block mb-2 m-0 text-center"}>
             <div style={{height: 25, margin: 0}}>
-                <p className={"fw-bold"}>Service Name</p>
+                <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Service Name</p>
             </div>
                 <hr/>
-                <p className={"fw-bold"}>Uptime (Last Month)</p>
+            <div style={{height: 25, margin: 0}}>
+                <p className={"fw-bold"}  style={{fontSize: ".9em"}}>Uptime (Last Month)</p>
+            </div>
+
                 <hr/>
-                <p className={"fw-bold"}>Uptime ({new Date().getFullYear()} YTD)</p>
+            <div style={{height: 25, margin: 0}}>
+                <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Uptime ({new Date().getFullYear()} YTD)</p>
+            </div>
+
                 <hr/>
-                <p className={"fw-bold"}>Avg Response Time (24hr)</p>
+            <div style={{height: 25, margin: 0}}>
+                <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Avg Response Time (24hr)</p>
+            </div>
+
                 <hr/>
-                <p className={"fw-bold"}>Current Status</p>
+            <div style={{height: 25, margin: 0}}>
+                <p className={"fw-bold"}   style={{fontSize: ".9em"}}>Current Status</p>
+            </div>
+
         </div>
     );
 }