Design updates

replicatedhq · May 22, 2020 · 87cd4d0 · 87cd4d0
1 parent 6b115c4
commit 87cd4d0
Show file tree

Hide file tree

Showing 4 changed files with 59 additions and 11 deletions.
diff --git a/kotsadm/web/src/components/troubleshoot/AnalyzerRedactorReportRow.jsx b/kotsadm/web/src/components/troubleshoot/AnalyzerRedactorReportRow.jsx
@@ -42,7 +42,10 @@ class AnalyzerRedactorReportRow extends React.Component {
           <p className="u-fontSize--large u-lineHeight--normal u-fontWeight--bold u-color--tuna">{this.calculateRedactorFileName(file?.file)} <span className="u-fontSize--normal u-fontWeight--medium u-lineHeight--normal u-color--chateauGreen"> 1 redaction </span> </p>
           <div className="flex flex1 alignItems--center">
             <p className="u-fontSize--normal u-fontWeight--medium u-lineHeight--normal u-color--dustyGray"> {file?.file} </p>
-            <span className="icon gray-forward-icon u-marginLeft--10" style={{ marginTop: "4px" }} />
+            <div class="arrow">
+              <div class="line"></div>
+              <div class="point"></div>
+            </div>
           </div>
         </div>
       </div>
@@ -78,7 +81,7 @@ class AnalyzerRedactorReportRow extends React.Component {
               </div>
             </div>
             {this.state.toggleDetails &&
-              <div className="Timeline--wrapper" style={{ marginLeft: "35px"}}>
+              <div className="Timeline--wrapper" style={{ marginLeft: "43px" }}>
                 {redactorFiles.length > 0 && redactorFiles?.map((file, i) => {
                   return this.renderRedactorFiles(file, i)
                 })}

diff --git a/kotsadm/web/src/images/main_spritesheet.svg b/kotsadm/web/src/images/main_spritesheet.svg
diff --git a/kotsadm/web/src/scss/components/troubleshoot/SupportBundleAnalysis.scss b/kotsadm/web/src/scss/components/troubleshoot/SupportBundleAnalysis.scss
@@ -334,6 +334,7 @@
 }
 
 .Timeline--wrapper {
+  position: relative;
   width: 100%;
   padding: 0 0 0 15px;
   border-left: 2px solid #C4C4C4;
@@ -354,8 +355,61 @@
     left: -17px;
     width: 10px;
   }
+
+  .section:after {
+    content: "";
+    position: absolute;
+    top: 25px;
+    left: -6px;
+    border: 1px solid #c4c4c4;
+    border-radius: 20px;
+  }
+}
+
+.Timeline--wrapper:before {
+  content: "";
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  border: 1px solid #c4c4c4;
+  height: 1px;
+  border-radius: 20px 20px 0 0;
+}
+
+.Timeline--wrapper:after {
+  content: "";
+  position: absolute;
+  bottom: -1px;
+  left: -2px;
+  border: 1px solid #c4c4c4;
+  height: 1px;
+  border-radius: 20px;
+}
+
+.arrow {
+  margin-left: 10px;
+  margin-bottom: 6px;
+  .line {
+    position: absolute;
+    margin-top: -1.1px;
+    height: 9.68px;
+    border: 1px solid #9B9B9B;
+    transform: rotate(-90deg);
+    border-radius: 20px;
+  }
+  .point {
+    position: absolute;
+    width: 6.01px;
+    height: 5.95px;
+    border-top: 2px solid #9B9B9B;
+    border-left: 2px solid #9B9B9B;
+    border-bottom-left-radius: 2px;
+    border-top-right-radius: 2px;
+    transform: rotate(-220deg);
+  }
 }
 
+
 /* ≥ 960px */
 @media screen and (min-width: 60em) {
   .insight-tile-wrapper {

diff --git a/kotsadm/web/src/scss/utilities/icons.scss b/kotsadm/web/src/scss/utilities/icons.scss
@@ -650,8 +650,3 @@
   width: 22.1px;
   height: 26px;
 }
-.icon.gray-forward-icon {
-  background-position: -57px -430px;
-  width: 9px;
-  height: 11px;
-}