Design modifications

gratipay · Jun 17, 2017 · 687956c · 687956c
1 parent 6517a68
commit 687956c
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 16 deletions.
diff --git a/scss/components/modal.scss b/scss/components/modal.scss
@@ -11,48 +11,61 @@
 
 .modal {
     $border-radius: 5px;
-    $header-height: 36px;
+    $header-height: 55px;
 
     display: inline-block;
     position: relative;
-    background: white;
     @include border-radius($border-radius);
-    @include box-shadow(0, 0, 10px, $black);
+    @include box-shadow(0, 0, 50px, $black);
 
     margin-top: 15vh;
 
     header {
-        position: absolute;
-        top: 0;
-        left: 0;
+        text-align: left;
         width: 100%;
         height: $header-height;
+        border: 1px solid $darker-black;
         background: white;
-        border-bottom: 1px solid $black;
         @include border-radius($border-radius $border-radius 0 0);
-        @include box-shadow(0, 0, 10px, $black);
 
         h2 {
             margin: 0;
-            padding: 12px 20px 0;
+            font-size: 20px;
+            padding: 0px 20px 0px 20px;
+            line-height: $header-height;
+            vertical-align: middle;
+            text-transform: none;
         }
 
         button {
+            border-top: 1px solid $darker-black;
+            border-right: 1px solid $darker-black;
+            border-bottom: 1px solid $darker-black;
+            color: $darker-black;
+            vertical-align: middle;
             position: absolute;
-            top: 5px;
-            right: 20px;
+            top: 0px;
+            right: 0px;
+            height: $header-height;
+            width: $header-height;
+            background: none;
+            @include border-radius(0 $border-radius 0 0);
+
+            &:hover {
+                background-color: $light-brown;
+            }
         }
     }
 
     section {
+        border-right: 1px solid $darker-black;
+        border-left: 1px solid $darker-black;
+        border-bottom: 1px solid $darker-black;
         text-align: left;
-
         overflow: auto;
         max-height: 70vh;
         z-index: 0;
-        margin-top: $header-height;
         background: $lightest-gray;
         @include border-radius(0 0 $border-radius $border-radius);
-        @include box-shadow(0, 0, 10px, $black);
     }
 }
diff --git a/scss/pages/identities.scss b/scss/pages/identities.scss
@@ -66,7 +66,7 @@
     }
 
     #country-chooser .modal {
-        width: 240px;
+        width: 300px;
 
         a.country {
             padding: 5px 20px;

diff --git a/scss/variables.scss b/scss/variables.scss
@@ -11,6 +11,7 @@ $brown: #630;
 $light-brown: desaturate(lighten($brown, 60), 60);
 
 $black: #454545;
+$darker-black: #333;
 $darker-gray: #CCC;
 $medium-gray: #999;
 $gray: #555;

diff --git a/www/~/%username/identities/index.spt b/www/~/%username/identities/index.spt
@@ -38,7 +38,7 @@ nidentities = len(identities)
         <div class="modal">
             <header>
                 <h2>{{ _("Which Country?") }}</h2>
-                <button class="close-modal">&times;</button>
+                <button class="close-modal icon">&#xe010;</button>
             </header>
             <section>
                 {% for name, code in countries %}