chore: ui

argentlabs · Nov 18, 2024 · dc3e69e · dc3e69e
1 parent 484296d
commit dc3e69e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 85 deletions.
diff --git a/src/app/globals.css b/src/app/globals.css
@@ -34,7 +34,6 @@ a {
   flex-direction: column;
 }
 
-/* Button -- START */
 button {
   font-size: 18px;
   font-weight: 500;
@@ -70,14 +69,6 @@ button.selected {
   background-color: #262933;
 }
 
-.connectors-grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
-  gap: 16px;
-}
-
-/* Button -- END */
-
 input,
 textarea {
   padding: 8px;
@@ -93,52 +84,15 @@ button[type="submit"] {
   text-align: center;
 }
 
-/* Header */
-
-.header-container {
-  padding: 32px 116px 16px;
-}
-
-.header-title {
-  font-weight: 400;
-  font-size: 20px;
-  line-height: 24px;
-  letter-spacing: 1%;
-  margin-top: 2px;
-}
-
 .header-account-separator {
   border-left: solid 1px #464c5e;
   margin: -4px 0;
 }
 
-/* Header - END */
-
-/* Section */
-.section-layout-heading {
-  gap: 8px;
-  position: relative;
-  border-bottom: solid 1px #262933;
-  padding-bottom: 16px;
-}
-
-.section-layout-container {
-  flex-direction: column;
-  gap: 24px;
-  width: 100%;
-  background-color: #14161c;
-  padding: 24px;
-  border-radius: 12px;
-  height: fit-content;
-}
-
-.section-title {
-  font-size: 18px;
-  font-weight: 600;
-  line-height: 24px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
+.connectors-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
+  gap: 16px;
 }
 
 .connector-icon {
@@ -188,14 +142,9 @@ button[type="submit"] {
   text-decoration-skip-ink: none;
 }
 
-/* Section */
-
-/* Status -- Start */
 .status-grid-container {
-  /* Create a grid with auto-fill columns, minimum 200px width */
   display: grid;
   grid-template-columns: repeat(2, 1fr);
-  /* Limit to maximum 4 columns using max-width */
   max-width: 800px;
   width: 100%;
   gap: 80px;
@@ -231,32 +180,8 @@ button[type="submit"] {
   white-space: nowrap;
 }
 
-/* Ensure no more than 4 columns at any viewport width */
 @media (min-width: 1000px) {
   .status-grid-container {
     grid-template-columns: repeat(4, 1fr);
   }
 }
-/* Status -- End */
-
-/* Sections list */
-.sections-container {
-  gap: 180px;
-  padding: 76px 116px;
-  flex: 1;
-  height: 100%;
-}
-
-/* Section list - End */
-
-/* Connection -- Start */
-
-.starknet-react-connectors-title {
-  font-size: 16px;
-  font-weight: 500;
-  line-height: 24px;
-  text-align: left;
-  text-underline-position: from-font;
-  text-decoration-skip-ink: none;
-}
-/* Connection -- End */
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
@@ -16,10 +16,10 @@ const Header = () => {
   const hexChainId = toHexChainid(chainId)
 
   return (
-    <div className="flex header-container bg-heading-bg">
+    <div className="flex pt-[32px] px-[116px] pb-[16px] bg-heading-bg">
       <div className="flex gap-3 items-center w-full">
         <LogoIcon />
-        <h1 className="header-title">Demo dapp</h1>
+        <h1 className="font-normal text-xl leading-6 mt-0.5">Demo dapp</h1>
         <div className="flex flex-1 w-full" />
 
         {isConnected && (

diff --git a/src/components/connect/Connect.tsx b/src/components/connect/Connect.tsx
@@ -37,7 +37,7 @@ const Connect = () => {
           </Button>
         </div>
         <div className="flex column w-full p-3 border border-solid border-color-inner-section gap-5 rounded-xl">
-          <span className="starknet-react-connectors-title">
+          <span className="text-base font-medium leading-6 text-left">
             Starknet-react connectors
           </span>
           <div className="connectors-grid">

diff --git a/src/components/sections/SectionLayout.tsx b/src/components/sections/SectionLayout.tsx
@@ -13,10 +13,12 @@ const SectionLayout: FC<SectionLayoutProps> = ({
   icon,
 }) => {
   return (
-    <div className="flex section-layout-container">
-      <div className="flex section-layout-heading">
+    <div className="flex flex-col gap-6 w-full h-fit p-6 rounded-xl bg-section-list-button-background">
+      <div className="flex pb-4 gap-2 relative border-solid border-b-[1px] border-color-inner-section ">
         {icon ? icon : <IconStatusIcon />}
-        <h3 className="section-title">{sectionTitle}</h3>
+        <h3 className="text-lg font-semibold leading-6 text-left">
+          {sectionTitle}
+        </h3>
         <InfoIcon
           style={{
             position: "absolute",