Merge pull request #151 from s0lvang/design-lok

Nye farger, favikoner, diverse brukergrensesnittprogramvarelusfeilfikser

public/favicon/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="src/assets/favicon/mstile-150x150.png"/>
+            <TileColor>#0d5474</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

public/favicon/site.webmanifest

@@ -0,0 +1,20 @@
+{
+    "name": "Karantenehjelpen",
+    "short_name": "Karantenehjelpen",
+    "icons": [
+        {
+            "src": "android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#0d5474",
+    "background_color": "#0d5474",
+    "start_url": "https://karantenehjelpen.no/",
+    "display": "standalone"
+}

public/index.html

@@ -6,12 +6,17 @@
     <meta property="og:title" content="Karantenehjelpen" />
     <meta property="og:description" content="Motta hjelp til å handle hvis du er i karantene, eller hjelp de som sitter i karantene med å handle" />
     <meta name="viewport" content="width=device-width,initial-scale=1.0" />
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico" />
-    <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <link rel="manifest" href="/manifest.json" />
     <title>Karantenehjelpen</title>
-    <!-- $color-primary -->
-    <meta name="theme-color" content="#0060a3" />
+    <link rel="apple-touch-icon" sizes="180x180" href="<%= BASE_URL %>favicon/apple-touch-icon.png">
+    <link rel="icon" type="image/png" sizes="32x32" href="<%= BASE_URL %>favicon/favicon-32x32.png">
+    <link rel="icon" type="image/png" sizes="16x16" href="<%= BASE_URL %>favicon/favicon-16x16.png">
+    <link rel="manifest" href="<%= BASE_URL %>favicon/site.webmanifest">
+    <link rel="mask-icon" href="<%= BASE_URL %>favicon/safari-pinned-tab.svg" color="#0d5474">
+    <link rel="shortcut icon" href="<%= BASE_URL %>favicon/favicon.ico">
+    <meta name="msapplication-TileColor" content="#0d5474">
+    <meta name="msapplication-config" content="<%= BASE_URL %>favicon/browserconfig.xml">
+    <meta name="theme-color" content="#0d5474">
     <meta
       name="description"
       content="Motta hjelp til å handle hvis du er i karantene, eller hjelp de som sitter i karantene med å handle."

src/common/base.scss

@@ -126,7 +126,3 @@ em {
   line-height: 2.5rem;
   font-style: italic;
 }
-
-p {
-  word-break: break-all;
-}

src/common/constants.scss

@@ -1,8 +1,8 @@
 // palette
-$color-primary: #0060a3;
+$color-primary: #0d5474;
+$color-text: darken(#0d5474, 15%); // #05222f
 $color-danger: #df2020;
 $color-background-contrast: #ccc;
-$color-text: #2c3e50;
 $color-text-contrast: white;
 
 // mixin components
@@ -17,13 +17,13 @@ $color-text-contrast: white;
 }
 
 @mixin elevation-soft {
-  box-shadow: 0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 2px 2px 0 rgba(0, 0, 0, 0.14),
-    0 1px 5px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 1px -2px rgba($color-text, 0.2),
+    0 2px 2px 0 rgba($color-text, 0.14), 0 1px 5px 0 rgba($color-text, 0.12);
 }
 
 @mixin elevation-hard {
-  box-shadow: 0 3px 5px -1px rgba(0, 0, 0, 0.2),
-    0 6px 10px 0 rgba(0, 0, 0, 0.14), 0 1px 18px 0 rgba(0, 0, 0, 0.12);
+  box-shadow: 0 3px 5px -1px rgba($color-text, 0.2),
+    0 6px 10px 0 rgba($color-text, 0.14), 0 1px 18px 0 rgba($color-text, 0.12);
 }
 
 @mixin card {

src/components/CreateEditRequest.vue

@@ -231,6 +231,11 @@ section > * + * {
   margin-top: 1rem;
 }
 
+#payment-solution {
+  border: none;
+  @include elevation-soft;
+}
+
 .error {
   text-align: center;
   color: $color-danger;

src/components/Footer.vue

@@ -34,6 +34,10 @@ footer {
   align-items: center;
   width: 100%;
 
+  a {
+    margin: 0 0.5rem;
+  }
+
   a:link,
   a:visited {
     color: $color-text-contrast;
@@ -46,9 +50,9 @@ footer {
     margin-top: $vertical-space-large;
   }
   svg {
-    margin-left: 1rem;
     fill: #ffffff;
     transition: opacity 0.2s;
+    vertical-align: middle;
 
     &:hover {
       opacity: 0.7;

src/components/Menu.vue

@@ -159,7 +159,7 @@ header {
   align-items: center;
   justify-content: space-between;
   padding: ($headerHeight - $contentSize) / 2 2rem;
-  box-shadow: 0 2px 4px rgba(black, 0.25);
+  box-shadow: 0 2px 4px rgba($color-text, 0.25);
 }
 
 img {

src/components/shared/BigTextInput.vue

@@ -33,3 +33,9 @@ export default {
   }
 };
 </script>
+
+<style lang="scss" scoped>
+textarea {
+  resize: vertical;
+}
+</style>