New Headers Implementation (#28)

Author: MarielaTihova

src/app/data/icons/exit_full_screen.svg

@@ -28,15 +28,14 @@
 
 .tab-container {
   width: 100%;
-  min-height: 132px;
   overflow: hidden;
   flex-shrink: 0;
-  padding: 16px;
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   background-color: var(--ig-surface-500);
   box-sizing: border-box;
+
   & a {
     text-decoration: none;
     display: block;
@@ -47,148 +46,107 @@
 
 .tab-item-container {
   width: 100%;
-  height: 100%;
+  height: 72px;
   display: inline-flex;
 }
 
 .tab-item {
+  align-items: center;
   height: 100%;
   display: flex;
   flex-grow: 1;
   flex-basis: 0;
-  flex-direction: column;
-  justify-content: space-between;
+  flex-direction: row;
+  justify-content: center;
   gap: 8px;
   padding: 12px;
   cursor: pointer;
   user-select: none;
-  border-bottom: 1px solid var(--ig-gray-300);
+  color: black;
 
   &--selected {
     border-bottom: 3px solid var(--ig-primary-500);
+    color: var(--ig-primary-500);
   }
 
   &:hover {
-    background: hsl(from var(--ig-gray-100) h s l/0.5);
+    background-color: var(--ig-gray-200);
   }
 }
 
 .tab-header {
   display: flex;
   flex-direction: row;
   gap: 8px;
-  color: var(--ig-gray-900);
-  font-size: 20px;
+  font-size: 16px;
   font-weight: 600;
-  line-height: 24px;
+  line-height: 20px;
   letter-spacing: 0.15px;
   --ig-size: var(--ig-size-medium);
-
-  &--disabled {
-    color: var(--ig-gray-700) !important;
-  }
 }
 
-.tab-content {
+.current-tab-info {
   display: flex;
-  flex-direction: column;
-  gap: 4px;
-  color: var(--ig-gray-900);
-  font-size: 14px;
-  font-weight: 400;
-  font-family: "aktiv-grotesk", sans-serif;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-
-  &--disabled {
-    color: var(--ig-gray-700) !important;
-  }
-}
-
-.tab-actions {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
   justify-content: space-between;
-  --ig-size: var(--ig-size-small);
-  --disabled-icon-color: #ffffff;
-
-  igc-icon-button.button--disabled::part(base) {
-    background-color: var(--ig-gray-600);
-    color: #ffffff;
-    &:hover {
-      background-color: var(--ig-gray-800);
-    }
+  gap: 2rem;
+  width: 100%;
+  height: 90px;
+  padding: 20px 24px;
+  border: 1px solid #D6D6D6;
+
+  .sample-info {
+    height: 58px;
+    display: flex;
+    flex-direction: column;
+    row-gap: 8px;
   }
 
-  igc-icon-button.button--enabled::part(base) {
-    background-color: #212121;
-    color: #ffffff;
-    &:hover {
-      background-color: var(--ig-gray-600);
-    }
+  .tab-description {
+    font-weight: 300;
+    font-size: 12px;
+    line-height: 100%;
+    letter-spacing: 0%;
   }
 
-  .learn-text {
-    text-decoration: none;
-    color: var(--ig-primary-500);
+  .sample-actions {
+    display: flex;
+    gap: 16px;
+    align-items: center;
+    line-height: 100%;
     font-size: 14px;
-    font-weight: 700;
-    font-family: "aktiv-grotesk", sans-serif;
-    line-height: 20px;
-
-    width: unset;
-    padding-bottom: 2px;
-    transition: background-size 350ms;
-    background: linear-gradient(0deg, var(--bg-color), var(--bg-color)) no-repeat right bottom / 0 var(--bg-h);
-    --bg-h: 2px;
-    --bg-color: var(--ig-primary-500);
-
-    &:where(:hover, :focus-visible) {
-      background-size: 100% var(--bg-h);
-      background-position-x: left;
+
+    .theme-info {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      font-weight: 600;
+      letter-spacing: 0.15px;
+      height: 40px;
+      padding-right: 16px;
+      border-right: 1px solid #D6D6D6;
     }
 
-    &.link--disabled {
-      color: var(--ig-primary-200);
-      --bg-color: var(--ig-primary-200);
+    .action-buttons {
+      display: flex;
+      justify-content: space-between;
+      gap: 16px;
+
+      .custom-button::part(base) {
+        color: black;
+        border-color: #D6D6D6;
+        text-transform: unset;
 
-      &:hover {
-        color: var(--ig-primary-500);
-        --bg-color: var(--ig-primary-500);
+        igc-icon::part(icon) {
+          color: black;
+        }
       }
     }
   }
 }
 
-.tooltip {
-  position: relative;
-  display: inline-block;
-
-  & .tooltip--text {
-    visibility: hidden;
-    background: #85888fe6;
-    box-shadow: rgba(36, 37, 44, 0.2) 0px 2px 2px 0px;
-    color: white;
-    padding: 4px 8px;
-    font-size: .625rem;
-    border-radius: 4px;
-    min-height: 24px;
-    top: 100%;
-    left: 50%;
-    width: 120px;
-    transform: translateX(-50%) translateY(5px);
-    text-align: center;
-    position: absolute;
-    z-index: 1;
-    font-family: var(--ig-font-family);
-    opacity: 0;
-    transition: opacity 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-  }
-  &:hover > .tooltip--text {
-    opacity: 1;
-    transform: translateX(-50%) translateY(0);
-    visibility: visible;
-    transition-delay: 1s;
-  }
-}
+:-webkit-full-screen {
+  width: 100vw;
+  height: 100vh;
+  overflow: auto;
+  background: white;
+}