From 3bb38501012a9c8d279c68c018ed5de4ef799cfd Mon Sep 17 00:00:00 2001
From: Tony Fischetti <tony.fischetti@gmail.com>
Date: Thu, 12 Dec 2024 22:41:23 -0500
Subject: [PATCH] a lot of new CSS improvments (at the cost of debt)

---
 app/components/InfoDrawer/InfoDrawer.tsx          |  5 ++---
 .../KeyValueTable/KeyValueTable.module.scss       |  3 ++-
 app/components/ObjectCard/ObjectCard.module.scss  | 15 +++++++++++++--
 app/components/SettingsDrawer/SettingsDrawer.tsx  |  2 +-
 app/components/Tombstone/Tombstone.module.scss    |  1 +
 .../ExhibitionView/ExhibitionView.module.scss     |  2 +-
 .../Viewers/ObjectView/ObjectView.module.scss     |  3 ++-
 .../components/ConstituentsHolder.module.scss     |  4 +++-
 app/styles/base.scss                              |  1 +
 9 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/app/components/InfoDrawer/InfoDrawer.tsx b/app/components/InfoDrawer/InfoDrawer.tsx
index 909886d..a7f4c64 100644
--- a/app/components/InfoDrawer/InfoDrawer.tsx
+++ b/app/components/InfoDrawer/InfoDrawer.tsx
@@ -21,10 +21,9 @@ export const SettingsDrawer = ({ infoOpenP, setInfoOpen }: Props) => {
       </DrawerHeader>
       <DrawerBody>
         { /* eww */ }
-        <p><b>Version</b>: { packageInfo['version'] }</p>
+        <p>Version: { packageInfo['version'] }</p>
         <br/>
-        <p><b>Link to feedback form:</b></p>
-        <p><a href="https://docs.google.com/spreadsheets/d/1nOciQakZAkqvUcTBPxS7VGYipqKZEGlqi3kQJwcL_U4/" target="_blank">Feedback form</a></p>
+        <p><a href="https://docs.google.com/spreadsheets/d/1nOciQakZAkqvUcTBPxS7VGYipqKZEGlqi3kQJwcL_U4/" target="_blank">Link to feeback form</a></p>
       </DrawerBody>
     </Drawer>
   );
diff --git a/app/components/KeyValueTable/KeyValueTable.module.scss b/app/components/KeyValueTable/KeyValueTable.module.scss
index 95286c8..1e0b8c9 100644
--- a/app/components/KeyValueTable/KeyValueTable.module.scss
+++ b/app/components/KeyValueTable/KeyValueTable.module.scss
@@ -12,7 +12,8 @@
   border-collapse: collapse;
   max-width: 40vw;
   @media (max-width: globals.$mobile) {
-    width: 90%;
+    // width: 90%;
+    max-width: 90vw;
   }
 
 }
diff --git a/app/components/ObjectCard/ObjectCard.module.scss b/app/components/ObjectCard/ObjectCard.module.scss
index e456856..c869236 100644
--- a/app/components/ObjectCard/ObjectCard.module.scss
+++ b/app/components/ObjectCard/ObjectCard.module.scss
@@ -58,6 +58,9 @@
   justify-content: flex-end;
   // color: var(--rs-gray-600);
   // color: #014a40;
+  @media (max-width: globals.$mobile) {
+    width: 15ch;
+  }
 }
 
 .left-right {
@@ -88,9 +91,17 @@
 }
 
 .obj-name-link {
-  font-size: 1.1em;
-  font-weight: bold;
+  font-size: 1.3em;
+  font-weight: 400;
   text-decoration: none;
+  //  TODO  come on, now
+  color: #074bcd;
+
+  //  TODO  come on, now
+  &:visited {
+    color: rebeccapurple;
+  }
+
 }
 
 .title {
diff --git a/app/components/SettingsDrawer/SettingsDrawer.tsx b/app/components/SettingsDrawer/SettingsDrawer.tsx
index bc30539..0c46143 100644
--- a/app/components/SettingsDrawer/SettingsDrawer.tsx
+++ b/app/components/SettingsDrawer/SettingsDrawer.tsx
@@ -21,7 +21,7 @@ export const SettingsDrawer = ({ settingsOpenP, setSettingsOpen, setDarkMode }:
       </DrawerHeader>
       <DrawerBody>
         { /* ewww */ }
-        <p><b>Coming soon</b></p>
+        <p>none, yet</p>
         <Button className="hidden" onClick={ () => setDarkMode((old: boolean) => !old) }>toggle mode</Button>
       </DrawerBody>
     </Drawer>
diff --git a/app/components/Tombstone/Tombstone.module.scss b/app/components/Tombstone/Tombstone.module.scss
index c6001bb..3397a46 100644
--- a/app/components/Tombstone/Tombstone.module.scss
+++ b/app/components/Tombstone/Tombstone.module.scss
@@ -11,6 +11,7 @@
 
   @media (max-width: globals.$mobile) {
     flex-direction: column;
+    padding: 20px;
   }
 }
 
diff --git a/app/components/Viewers/ExhibitionView/ExhibitionView.module.scss b/app/components/Viewers/ExhibitionView/ExhibitionView.module.scss
index 2053385..3f2b828 100644
--- a/app/components/Viewers/ExhibitionView/ExhibitionView.module.scss
+++ b/app/components/Viewers/ExhibitionView/ExhibitionView.module.scss
@@ -32,7 +32,7 @@
   margin-top: 7vh;
 
   @media (max-width: globals.$mobile) {
-    font-size: 3rem;
+    font-size: 2rem;
   }
 }
 
diff --git a/app/components/Viewers/ObjectView/ObjectView.module.scss b/app/components/Viewers/ObjectView/ObjectView.module.scss
index 8fae4bc..1ed62ff 100644
--- a/app/components/Viewers/ObjectView/ObjectView.module.scss
+++ b/app/components/Viewers/ObjectView/ObjectView.module.scss
@@ -56,8 +56,9 @@
   color: black;
   width: 95vw;
   border-radius: 10px;
-  padding: 10px;
+  padding: 10px 10px 10px 30px;
   margin: 0px 0px 20px 0px;
+  font-weight: 100;
 }
 
 .content {
diff --git a/app/components/Viewers/ObjectView/components/ConstituentsHolder.module.scss b/app/components/Viewers/ObjectView/components/ConstituentsHolder.module.scss
index 68c3a91..5f2ad6f 100644
--- a/app/components/Viewers/ObjectView/components/ConstituentsHolder.module.scss
+++ b/app/components/Viewers/ObjectView/components/ConstituentsHolder.module.scss
@@ -11,6 +11,7 @@
     justify-content: center;
     align-items: center;
     font-size: 1.5rem;
+    width: 100%;
   }
 }
 
@@ -49,8 +50,9 @@
   padding: 0px 0px 0px 10px;
 
   @media (max-width: globals.$mobile) {
-    align-items: center;
     width: 100%;
+    gap: 10px;
+    align-items: flex-start;
   }
 }
 
diff --git a/app/styles/base.scss b/app/styles/base.scss
index f54c3cc..4928fb2 100644
--- a/app/styles/base.scss
+++ b/app/styles/base.scss
@@ -43,6 +43,7 @@ main {
 
 .rs-drawer-left.rs-drawer-xs, .rs-drawer-right.rs-drawer-xs {
   width: 55vw;
+  max-width: 500px;
   min-width: 250px;
 }