styles: text background

safe-global · Dec 2, 2024 · b7dae42 · b7dae42
1 parent 360117a
commit b7dae42
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 16 deletions.
diff --git a/public/images/Safenet/Architecture/border-union.png b/public/images/Safenet/Architecture/border-union.png
diff --git a/src/components/Safenet/Architecture/index.tsx b/src/components/Safenet/Architecture/index.tsx
@@ -58,6 +58,8 @@ const ProcessorFeatures = () => (
 
 const MidItemHeader = () => (
   <div className={css.midItemHeader}>
+    <img src="/images/Safenet/Architecture/border-union.png" alt="Block border" className={css.border} />
+
     <Typography className={css.midItemTitle}>USER</Typography>
     <Typography className={css.midItemText}>Initiates transaction intent</Typography>
   </div>

diff --git a/src/components/Safenet/Architecture/styles.module.css b/src/components/Safenet/Architecture/styles.module.css
@@ -35,12 +35,10 @@
 }
 
 .title {
-  max-width: 700px;
   text-transform: uppercase;
   text-align: center;
-
-  font-size: 56px;
-  line-height: 60px;
+  font-size: 40px;
+  line-height: 44px;
 }
 
 .titleGradient {
@@ -71,17 +69,22 @@
   margin-bottom: 0px;
 }
 
+.midItemHeader {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 56px;
+}
+
 .midItemTitle {
+  padding-top: 22px;
   font-size: 24px;
   line-height: 32px;
   font-weight: 400;
 }
 
-/* to remove after ahving the asset*/
-.stepperWrapper .midItemHeader {
-  border: 1px solid var(--mui-palette-primary-main);
-  padding: 24px 16px;
-  border-radius: 20px;
+.border {
+  position: absolute;
 }
 
 .midItemContainer {
@@ -207,13 +210,6 @@
   background-color: transparent;
 }
 
-.midItemHeader {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  gap: 54px;
-}
-
 .borderedDescription {
   border: 1px solid var(--mui-palette-border-main);
   padding: 88px 16px 24px;
@@ -222,6 +218,12 @@
 }
 
 @media (min-width: 1200px) {
+  .title {
+    max-width: 700px;
+    font-size: 56px;
+    line-height: 60px;
+  }
+
   .stepperWrapper {
     display: none;
   }