profile styles

elizaOS · Nov 4, 2024 · e301873 · e301873
1 parent 2d937e2
commit e301873
Show file tree

Hide file tree

Showing 4 changed files with 53 additions and 34 deletions.
diff --git a/src/components/ProfileHoldings.module.css b/src/components/ProfileHoldings.module.css
@@ -145,29 +145,19 @@
 
 @media (max-width: 768px) {
   .container {
-    padding: 12px 8px;
+    padding: 24px 8px;
     overflow-x: hidden;
   }
 
   .holdingsTable {
-    width: calc(100% - 16px);
-    margin: 0 8px;
-  }
-
-  .holdingCell {
-    padding: 12px 8px;
-  }
-
-  .valueCell {
-    padding: 12px 8px;
-  }
-
-  .allocationCell {
-    padding: 12px 8px;
+    width: 100%;
   }
 
+  .holdingCell,
+  .valueCell,
+  .allocationCell,
   .tableHeader {
-    padding: 8px;
+    padding: 12px 8px;
   }
 
   /* Adjust the holding info layout */

diff --git a/src/components/ProfileTotals.module.css b/src/components/ProfileTotals.module.css
@@ -23,7 +23,7 @@
     flex-shrink: 0;
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: left;
     justify-content: center;
     padding: 8px 14px;
     box-sizing: border-box;
@@ -203,18 +203,18 @@
     width: 100%;
     background: linear-gradient(to right, rgba(156, 149, 132, 0.95), rgba(115, 107, 85, 0.95));
     border-radius: 16px;
-    padding: 12px;
+    padding: 20px;
     display: flex;
     justify-content: space-around;
-    gap: 8px;
+    gap: 80px;
     box-sizing: border-box;
     backdrop-filter: blur(10px);
 }
 
 .metricItem {
     display: flex;
     flex-direction: column;
-    align-items: center;
+    align-items: left;
     gap: 2px;
     flex: 1;
     min-width: 0;
@@ -227,35 +227,37 @@
     font-weight: 600;
     color: #FFFFFF;
     line-height: 1.2;
-    text-align: center;
+    text-align: left;
     white-space: nowrap;
 }
 
 .metricLabel {
     font-family: 'SF Pro Text', -apple-system, BlinkMacSystemFont, sans-serif;
-    font-size: 10px;
+    font-size: 12px;
     font-weight: 500;
     color: rgba(255, 255, 255, 0.7);
     letter-spacing: 0.5px;
     text-transform: uppercase;
-    text-align: center;
+    text-align: left;
     white-space: nowrap;
 }
 
 @media (max-width: 768px) {
     .metricsBar {
-        padding: 8px;
-        gap: 4px;
-        margin: 0 8px;
+        padding: 18px;
+        gap: 60px;
+        margin: 0 0px;
         background: linear-gradient(to right, rgba(156, 149, 132, 1), rgba(115, 107, 85, 1));
     }
 
     .metricValue {
-        font-size: 16px;
+        font-size: 20px;
+        text-align: left;
     }
 
     .metricLabel {
-        font-size: 9px;
+        font-size: 12px;
+        text-align: left;
     }
 
     .buttonParent {

diff --git a/src/components/ProfileWallets.module.css b/src/components/ProfileWallets.module.css
@@ -60,7 +60,7 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-    padding: 24px 24px;
+    padding: 0 8px;
     box-sizing: border-box;
     gap: 10px;
     max-width: 600px;
@@ -73,7 +73,7 @@
     font-size: 24px;
     font-weight: 600;
     color: #242424;
-    margin-bottom: 8px;
+    margin: 24px 0px 10px 0px;
     font-family: 'SF Compact Rounded';
 }
 .buttonParent {
@@ -82,4 +82,17 @@
     align-items: center;
     gap: 12px;
     width: 100%;
+    margin: 0 0px;
+    font-family: 'SF Compact Rounded';
+}
+
+@media (max-width: 768px) {
+    .numberParent {
+        padding: 0 24px;  /* Match metricsBar margin */
+    }
+
+    .title {
+        margin: 24px 0 16px 24px;  /* Add spacing between sections */
+        font-family: 'SF Compact Rounded';
+    }
 }
diff --git a/src/components/Socials.module.css b/src/components/Socials.module.css
@@ -7,6 +7,7 @@
     position: relative;
     line-height: 22px;
     font-weight: 600;
+    margin: 0 24px;
 }
 .button {
     border-radius: 14px;
@@ -52,9 +53,10 @@
 .buttonParent {
     display: flex;
     flex-direction: row;
-    align-items: center;
+    align-items: left;
     gap: 12px;
-    width: 100%;
+    width: calc(100% - 16px);
+    margin: 0 0px;
 }
 .numberParent {
     width: 100%;
@@ -63,7 +65,7 @@
     flex-direction: column;
     align-items: flex-start;
     justify-content: flex-start;
-    padding: 24px 24px;
+    padding: 0 8px;
     box-sizing: border-box;
     gap: 10px;
     max-width: 600px;
@@ -87,6 +89,18 @@
     font-size: 24px;
     font-weight: 600;
     color: #242424;
-    margin-bottom: 8px;
+    padding: 24px 0px 10px;
+    margin: 0 0px;
     font-family: 'SF Compact Rounded';
 }
+
+@media (max-width: 768px) {
+    .numberParent {
+        padding: 0 8px;  /* Match metricsBar margin */
+    }
+
+    .title {
+        margin: 24px 0px 16px 24px;  /* Add spacing between sections */
+        font-family: 'SF Compact Rounded';
+    }
+}