Feature: Add Release Notes (#491)

Co-authored-by: Vijay A <vraravam@users.noreply.github.com>
Co-authored-by: Ricardo Cino <ricardo@cino.io>

2 files changed, 154 insertions, 0 deletions

diff --git a/src/styles/auth.scss b/src/styles/auth.scss
index e60c4971c..53c03a40a 100644
--- a/src/styles/auth.scss
+++ b/src/styles/auth.scss
@@ -61,6 +61,12 @@
     width: 350px;
 
     &.auth__container--signup { width: 450px; }
+
+    &.auth__container--releasenotes {
+      width: 90%;
+      height: -webkit-fill-available;
+      max-height: 80%;
+    }
   }
 
   .auth__logo {
@@ -92,6 +98,32 @@
     }
   }
 
+  .releasenotes__body {
+    overflow-y: scroll;
+
+    &::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+      background: none;
+      border-radius: 10px;
+      -webkit-border-radius: 10px;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+      background: $theme-gray-lighter;
+      border-radius: 10px;
+      -webkit-border-radius: 10px;
+    }
+
+    &::-webkit-scrollbar-thumb:window-inactive {
+      background: none;
+    }
+  }
+
   .touchid__button {
     margin-bottom: 25px;
   }
@@ -135,6 +167,7 @@
     padding-top: 2%;
     padding-bottom: 2%;
     justify-content: center;
+    height: fit-content;
   }
 
   .auth__adlk {
@@ -168,3 +201,29 @@
     text-align: center;
   }
 }
+
+.auth__main--releasenotes {
+  margin: 4% 2% 0% 4%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  height: -webkit-fill-available;
+}
+
+.auth__header {
+  font-size: x-large;
+  display: inline-flex;
+  flex-direction: row;
+  align-content: center;
+  justify-content: center;
+  flex-wrap: wrap;
+  height: fit-content;
+
+  &-item__secondary {
+    padding-left: 5px
+  }
+}
+
+.auth__body {
+  margin-top: 2%;
+}
diff --git a/src/styles/settings.scss b/src/styles/settings.scss
index 76d167fd4..f16fc91fd 100644
--- a/src/styles/settings.scss
+++ b/src/styles/settings.scss
@@ -234,6 +234,10 @@
 
     .settings__header-item {
       @extend %headline;
+
+      &__secondary {
+        padding-left: 5px
+      }
     }
 
     .separator {
@@ -630,3 +634,94 @@
     display: inline-block;
   }
 }
+
+.settings__updates__changelog-button {
+  margin-left: 2% !important;
+}
+
+.releasenotes__body {
+  line-height: 150%;
+
+    h1 {
+      margin-top: 0;
+      font-weight: 400;
+      font-size: xx-large;
+      text-align: center;
+    }
+
+    h2 {
+      margin-top: 10%;
+      font-weight: 400;
+      font-size: x-large;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    h3 {
+      margin-top: 5%;
+      font-weight: 400;
+      font-size: large;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    h4 {
+      margin-top: 5%;
+      font-weight: 400;
+      font-size: medium;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    h5 {
+      margin-top: 5%;
+      font-weight: 400;
+      text-align: center;
+      margin-bottom: 2%;
+    }
+
+    p {
+      margin-top: 4%;
+      margin-bottom: 4%;
+      user-select: text;
+    }
+
+    a {
+      color: rgb(0, 102, 255) !important;
+      user-select: text;
+    }
+
+    code {
+      background: #f4f4f4;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      padding: 0.2em 0.4em;
+      font-size: 85%;
+      color: #666;
+      font-family: monospace;
+      margin-bottom: 1.6em;
+      max-width: 100%;
+      overflow: auto;
+      user-select: text;
+    }
+
+    ul {
+      padding-left: 2rem;
+    }
+
+    li {
+      margin-top: 2%;
+      list-style-type: disc;
+      user-select: text;
+    }
+
+    img {
+      max-width: 100%;
+      margin-top: 2%;
+      margin-bottom: 2%;
+      align-items: center;
+      display: block;
+      margin-left: auto;
+      margin-right: auto;
+    }
+}