Merge pull request #34 from topcoder-platform/issues-506

jmgasper · web-flow · commit 3d729e8dc242 · 2021-04-02T07:59:45.000+11:00
Issues-506: Fixed styles for notification popup
diff --git a/design/custom.css b/design/custom.css
diff --git a/design/custom.css.map b/design/custom.css.map
diff --git a/design/images/icon-close-2.svg b/design/images/icon-close-2.svg
@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="14px" height="14px" viewBox="0 0 14 14" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>6D192661-1629-460F-8025-B192307309DD</title>
+    <defs>
+        <path d="M11.9875,0.2625 C11.6375,-0.0875 11.1125,-0.0875 10.7625,0.2625 L6.125,4.9 L1.4875,0.2625 C1.1375,-0.0875 0.6125,-0.0875 0.2625,0.2625 C-0.0875,0.6125 -0.0875,1.1375 0.2625,1.4875 L4.9,6.125 L0.2625,10.7625 C-0.0875,11.1125 -0.0875,11.6375 0.2625,11.9875 C0.4375,12.1625 0.6125,12.25 0.875,12.25 C1.1375,12.25 1.3125,12.1625 1.4875,11.9875 L6.125,7.35 L10.7625,11.9875 C10.9375,12.1625 11.2,12.25 11.375,12.25 C11.55,12.25 11.8125,12.1625 11.9875,11.9875 C12.3375,11.6375 12.3375,11.1125 11.9875,10.7625 L7.35,6.125 L11.9875,1.4875 C12.3375,1.1375 12.3375,0.6125 11.9875,0.2625 L11.9875,0.2625 Z" id="path-1"></path>
+    </defs>
+    <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="08-Public-Forum-app-notifications" transform="translate(-457.000000, -1278.000000)">
+            <g id="Group-7" transform="translate(55.000000, 1260.000000)">
+                <g id="icon/x-mark" transform="translate(402.875000, 18.875000)">
+                    <mask id="mask-2" fill="white">
+                        <use xlink:href="#path-1"></use>
+                    </mask>
+                    <use id="icon-color" fill="#AAAAAA" xlink:href="#path-1"></use>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>
diff --git a/src/scss/base/_categories.scss b/src/scss/base/_categories.scss
@@ -21,16 +21,7 @@
             position: relative;
 
             &::after {
-              content: '';
-              width: 3px;
-              height: 3px;
-              border-radius: 50%;
-              background: $global-color_grey;
-              position: absolute;
-              display: block;
-              right: -8px;
-              margin-top: -2px;
-              top: 50%;
+              content: none
             }
           }
         }
diff --git a/src/scss/base/_discussions.scss b/src/scss/base/_discussions.scss
@@ -81,13 +81,12 @@
 @media screen and (max-width: 768px) {
   .DataList.Discussions {
     li.ItemDiscussion {
-      border-top: 1px solid $global-grey-bg;
-      background-color: transparent;
+      border-bottom: none;
+      border-top: none;
+      background-color: #f4f4f4;
+      margin-bottom: 16px;
+      padding: 18px 20px 0 25px!important;
       border-radius: 10px;
-      padding: 19px 0 18px 0;
-      border-radius: 0;
-      margin-top: 0;
-      position: relative;
 
       &:first-child {
         border-top: none;
@@ -100,7 +99,7 @@
       .Options {
         position: absolute;
         top: 20px;
-        right: 0;
+        right: 5px;
       }
 
       .Meta.Meta-Discussion {
@@ -119,31 +118,22 @@
 
         &.status-container {
           .MCount,
-          .Tag {
+          .Tag, .MiddleDot {
             display: none;
           }
 
           .MItem.Category {
-            position: relative;
+            display: none;
 
             &::before {
-              content: "";
-              width: 3px;
-              height: 3px;
-              border-radius: 50%;
-              background: $global-color_grey;
-              position: absolute;
-              display: block;
-              left: -7px;
-              margin-top: -2px;
-              top: 50%;
+              content: none;
             }
           }
 
         }
 
         &.view-comment-container {
-          .MItem:not(.MCount),
+          .MItem:not(.MCount,.MiddleDot),
           .Tag {
             display: none;
           }
@@ -152,16 +142,7 @@
             position: relative;
 
             &::after {
-              content: "";
-              width: 3px;
-              height: 3px;
-              border-radius: 50%;
-              background: $global-color_grey;
-              position: absolute;
-              display: block;
-              right: -8px;
-              margin-top: -2px;
-              top: 50%;
+              content: none;
             }
 
             &.CommentCount {
diff --git a/src/scss/components/_index.scss b/src/scss/components/_index.scss
@@ -2,4 +2,5 @@
 @import 'mebox';
 @import "lists";
 @import "easymde";
-@import "searchbox";
+@import "searchbox";
+@import "popup";
diff --git a/src/scss/components/_popup.scss b/src/scss/components/_popup.scss
@@ -0,0 +1,81 @@
+div.Popup {
+  .Body {
+    a {
+      color: $global-blue;
+      &:focus,
+      &:hover {
+        color: $global-blue;
+        text-decoration: $theme-link-hover_textDecoration;
+      }
+    }
+    .Buttons .Close {
+      &:focus,
+      &:hover {
+        color: $global-color_white;
+      }
+    }
+  }
+
+
+  a.Close {
+    top: 24px;
+    right: 28px;
+    @if ($staticVariables) {
+      @include CloseButton($popup_fg);
+    }
+  }
+}
+.InformWrapper {
+  margin: 0px;
+}
+.InformMessages {
+  margin-left: 55px;
+}
+
+.InformMessages .InformMessage {
+   padding: 16px 34px 10px 26px;
+   margin: 10px 0px;
+   width: 436px;
+   max-width: 436px;
+}
+.InformMessages .InformMessage,
+.InformMessages .InformMessage:hover {
+  background-color: $global-color_white !important;
+  border-radius: 10px;
+  box-shadow: 0 2px 10px 2px rgba(0, 0, 0, 0.1) !important;
+  font-size: $global-medium_fontSize;
+  font-family: $global-body_fontFamily;
+
+  a {
+    color: $global-blue;
+  }
+
+  a.Close {
+    top: 16px;
+    right: 21px;
+
+    span::after {
+      content: "";
+      display: inline-block;
+      background-size: cover;
+      position: absolute;
+      height: 12px;
+      width: 12px;
+      background-image: url("/themes/topcoder/design/images/icon-close-2.svg");
+    }
+  }
+}
+
+@media (max-width: 500px) {
+  .InformMessages {
+    margin-left: 0px;
+  }
+  .InformWrapper {
+    margin: 5px;
+  }
+  .InformMessages .InformMessage {
+    width: 100%;
+    max-width: 100%;
+  }
+}
+

Original file line number	Diff line number	Diff line change
`@@ -21,16 +21,7 @@`
`21`	`21`	`position: relative;`
`22`	`22`
`23`	`23`	`&::after {`
`24`		`- content: '';`
`25`		`- width: 3px;`
`26`		`- height: 3px;`
`27`		`- border-radius: 50%;`
`28`		`- background: $global-color_grey;`
`29`		`- position: absolute;`
`30`		`- display: block;`
`31`		`- right: -8px;`
`32`		`- margin-top: -2px;`
`33`		`- top: 50%;`
	`24`	`+ content: none`
`34`	`25`	`}`
`35`	`26`	`}`
`36`	`27`	`}`