Merge pull request #29 from JuzerShakir/upgrade-ui

Upgrade UI

Gemfile

@@ -29,7 +29,7 @@ gem "sentry-rails", "~> 5.13.0"
 gem "sentry-ruby", "~> 5.13.0"
 gem "simple_form", "~> 5.3.0"
 gem "stimulus-rails"
-gem "turbo-rails"
+gem "turbo-rails", "~> 1.5.0"
 gem "tzinfo-data", platforms: %i[mingw mswin x64_mingw jruby]
 gem "validates_email_format_of", "~> 1.7.2"
 gem "validates_timeliness", "~> 7.0.0.beta1"

Gemfile.lock

@@ -354,7 +354,7 @@ GEM
     timeliness (0.4.5)
     timeout (0.4.1)
     ttfunk (1.7.0)
-    turbo-rails (1.3.2)
+    turbo-rails (1.5.0)
       actionpack (>= 6.0.0)
       activejob (>= 6.0.0)
       railties (>= 6.0.0)
@@ -425,7 +425,7 @@ DEPENDENCIES
   simplecov
   standard
   stimulus-rails
-  turbo-rails
+  turbo-rails (~> 1.5.0)
   tzinfo-data
   validates_email_format_of (~> 1.7.2)
   validates_timeliness (~> 7.0.0.beta1)

app/assets/stylesheets/_components.scss

@@ -0,0 +1,26 @@
+.create-sabeel-btn {
+	background-image: linear-gradient(
+		to right,
+		$primary 0%,
+		$success 51%,
+		$secondary 100%
+	);
+	transition: 0.7s;
+	background-size: 200% auto;
+
+	&:hover {
+		background-position: right center;
+		color: white; /* change the direction of the change here */
+		text-decoration: none;
+	}
+}
+
+// styles defined here will take precedence over the in-line styles defined
+.default-btn {
+	@extend .col-7;
+	@extend .col-md-3;
+	@extend .btn;
+	@extend .rounded-pill;
+	@extend .fw-medium;
+	@extend .mb-3;
+}

app/assets/stylesheets/abstracts/_themes.scss

@@ -0,0 +1,8 @@
+$primary: #1f2605 !default;
+$secondary: #53900f !default;
+$info: #a4a71e !default;
+$success: #1f6521 !default;
+$danger: #6f2232 !default;
+$dropdown-bg: $primary !default;
+$light: #d6ce15 !default;
+$lighter: #cac886 !default;

app/assets/stylesheets/abstracts/_variables.scss

@@ -0,0 +1,9 @@
+// * Form defaults
+$input-color: $secondary;
+$input-placeholder-color: $lighter;
+$input-font-weight: 500;
+$input-border-color: $light;
+$input-focus-border-color: $secondary;
+$input-border-width: 2px;
+$form-check-input-checked-bg-color: $success;
+$form-check-input-checked-border-color: $success;

app/assets/stylesheets/application.bootstrap.scss

@@ -1,150 +1,22 @@
-@import "bootstrap/scss/bootstrap";
-@import "bootstrap-icons/font/bootstrap-icons";
-
-body {
-	background: url("background.png") no-repeat center center;
-	background-size: cover;
-	background-attachment: fixed;
-	font-family: lato, sans-serif;
-}
-
-// for mobile-devices
-@media (max-width: 767px) {
-	.button,
-	.button-contact {
-		width: 100%;
-	}
-
-	.about {
-		margin-top: 4rem;
-	}
-}
-
-// for non-mobile-devices
-@media (min-width: 767px) {
-	.button {
-		width: 35%;
-	}
-
-	.m-left {
-		margin-left: 10%;
-	}
-
-	.button-contact {
-		width: 25%;
-	}
-
-	.desktop-mt {
-		margin-top: 4rem;
-	}
-}
-
-.note {
-	font-size: 0.7rem;
-}
-
-.c-bg {
-	background-color: rgba(255, 255, 255, 0.63);
-}
-
-.about {
-	background-color: rgba(252, 244, 253, 0.5);
-	border-color: rgba(251, 224, 253);
-	border-radius: 2px;
-}
-
-.c-shadow {
-	box-shadow: 0px -7px 10px rgba(0, 0, 0, 0.15);
-}
-
-.error-message {
-	margin: 0;
-	position: absolute;
-	top: 50%;
-	left: 50%;
-	-ms-transform: translate(-50%, -50%);
-	transform: translate(-50%, -50%);
-	h1 {
-		font-size: 15vw;
-	}
-}
-
-#flash {
-	position: absolute;
-	z-index: 2;
-	right: 10px;
-	background-color: rgba(0, 0, 0, 0.737);
-	font-size: larger;
-	padding: 15px;
-	border-radius: 25px;
-}
+// ? Using the 7-1 pattern for a manageable CSS
+// More info here: https://openclassrooms.com/en/courses/5625786-produce-maintainable-css-with-sass/5723581-use-the-7-1-pattern-for-a-manageable-codebase
 
-#flash-success {
-	color: rgb(0, 255, 0);
-}
+// ! IMPORTANT - load these files before any other css files
+@import "abstracts/themes";
+@import "abstracts/variables";
+@import "base/typography";
 
-#flash-alert {
-	color: rgb(255, 0, 0);
-}
-
-#flash-notice {
-	color: rgb(255, 255, 0);
-}
-
-#show-header-transaction {
-	background-color: #d7fcd7;
-}
-
-#show-transaction {
-	background-color: #d7fcd7;
-}
-
-#show-thaali {
-	background-color: #d4d4d4;
-}
-
-#show-header-thaali {
-	background-color: #afeeee;
-}
-
-#show-sabeel,
-#show-user {
-	background-color: #f7e6bc;
-}
-
-#show-header-sabeel {
-	background-color: #ffefd5;
-}
-
-#show-header-users {
-	background-color: #ffa07a;
-}
-
-#all-sabeels {
-	border-style: solid;
-	border-width: 2px;
-	border-color: rgb(255, 193, 7);
-}
-
-#all-thaalis {
-	border-style: solid;
-	border-width: 2px;
-	border-color: rgb(13, 202, 240);
-}
-
-#all-transactions {
-	border-style: solid;
-	border-width: 2px;
-	border-color: rgb(25, 135, 84);
-}
-
-#all-users {
-	border-style: solid;
-	border-width: 2px;
-	border-color: rgb(220, 53, 69);
-}
-
-#footer {
-	background-color: rgb(33, 37, 41);
-	font-size: 14px;
-}
+// * load other sass files from here
+@import "bootstrap/scss/bootstrap";
+// base
+@import "base/base";
+@import "base/utilities";
+@import "base/animations";
+// layouts
+@import "layouts/flash";
+@import "layouts/form";
+@import "layouts/index";
+@import "layouts/search";
+@import "layouts/show";
+
+@import "components";

app/assets/stylesheets/base/_animations.scss

@@ -0,0 +1,14 @@
+@keyframes flash {
+	0% {
+		transform: translateX(-15rem);
+	}
+	35% {
+		transform: translateX(1.5rem);
+	}
+	65% {
+		transform: translateX(1.5rem);
+	}
+	100% {
+		transform: translateX(-15rem);
+	}
+}

app/assets/stylesheets/base/_base.scss

@@ -0,0 +1,28 @@
+body {
+	background: url("background.png") no-repeat center center;
+	background-size: cover;
+	background-attachment: fixed;
+}
+
+input[type="search"] {
+	&::-webkit-search-decoration,
+	&::-webkit-search-cancel-button,
+	&::-webkit-search-results-button,
+	&::-webkit-search-results-decoration {
+		display: none;
+	}
+}
+
+.form-control {
+	&::-moz-placeholder {
+		opacity: 0.85;
+	}
+
+	&:-ms-input-placeholder {
+		opacity: 0.85;
+	}
+
+	&::-webkit-input-placeholder {
+		opacity: 0.85;
+	}
+}

app/assets/stylesheets/base/_typography.scss

@@ -0,0 +1,18 @@
+// * Josefin Sans (400) & Nunito (200, 300, 400, 500)
+// source: https://fonts.google.com/specimen/Nunito
+// source: https://fonts.google.com/specimen/Josefin+Sans
+@import url("https://fonts.googleapis.com/css2?family=Josefin+Sans&family=Nunito:wght@200;300;400;500&display=swap");
+
+$font-family-base: "Nunito", sans-serif;
+$font-weight-base: 300;
+
+.heading {
+	font-family: "Josefin Sans", sans-serif;
+	font-weight: 400;
+	text-align: center;
+	color: $primary;
+}
+
+.fs-bigger {
+	font-size: 15dvh !important;
+}

app/assets/stylesheets/base/_utilities.scss

@@ -0,0 +1,3 @@
+.mt-6 {
+	margin-top: 4rem !important;
+}

app/assets/stylesheets/layouts/_flash.scss

@@ -0,0 +1,16 @@
+#flash {
+	transform: translateX(-15rem);
+	animation: flash 5s;
+
+	&-alert {
+		color: $red;
+	}
+
+	&-notice {
+		color: $yellow;
+	}
+
+	&-success {
+		color: $secondary;
+	}
+}

app/assets/stylesheets/layouts/_form.scss

@@ -0,0 +1,3 @@
+#form-login {
+	height: 70dvh !important;
+}

app/assets/stylesheets/layouts/_index.scss

@@ -0,0 +1,8 @@
+#sabeels,
+#thaalis,
+#transactions,
+#users {
+	.row:not(:last-child) {
+		border-bottom: 2px solid $secondary;
+	}
+}

app/assets/stylesheets/layouts/_search.scss

@@ -0,0 +1,29 @@
+#search {
+	input {
+		padding: 0.75rem 1.5rem;
+
+		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%23a4a71e' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
+		background-repeat: no-repeat;
+		background-size: 18px 18px;
+		background-position: 94% center;
+
+		background-color: transparent;
+		backface-visibility: hidden;
+
+		border-radius: 2rem;
+		transform-style: preserve-3d;
+		transition: all 300ms ease-in-out;
+
+		&:hover,
+		&:focus {
+			background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='1em' fill='%2353900f' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
+			padding: 0.75rem 0.5rem;
+			outline: 0;
+			border: 2px solid transparent;
+			border-bottom: 2px solid $input-focus-border-color;
+			border-radius: 0;
+			box-shadow: none;
+			background-position: 98% center;
+		}
+	}
+}