ui: fix starting view buttons (#54)

start refactoring material usage

Signed-off-by: Grzegorz Choiński <[email protected]>

Foodie/ClientApp/.gitignore

@@ -1,5 +1,7 @@
 # See http://help.github.com/ignore-files/ for more about ignoring files.
 
+.angular/
+
 # compiled output
 /dist
 /dist-server

Foodie/ClientApp/package.json

@@ -25,7 +25,7 @@
         "@angular/platform-browser": "17.1.1",
         "@angular/platform-browser-dynamic": "17.1.1",
         "@angular/platform-server": "17.1.1",
-        "@angular/pwa": "^17.1.1",
+        "@angular/pwa": "17.1.1",
         "@angular/router": "17.1.1",
         "@angular/service-worker": "17.1.1",
         "angular2-counto": "^1.2.5",
@@ -43,9 +43,9 @@
         "zone.js": "~0.14.0"
     },
     "devDependencies": {
-        "@angular-devkit/build-angular": "^17.1.1",
-        "@angular/cli": "^17.1.1",
-        "@angular/compiler-cli": "^17.1.1",
+        "@angular-devkit/build-angular": "17.1.1",
+        "@angular/cli": "17.1.1",
+        "@angular/compiler-cli": "17.1.1",
         "@angular/language-service": "8.0.0",
         "@types/jasmine": "~3.3.9",
         "@types/jasminewd2": "~2.0.6",

Foodie/ClientApp/src/app/starting/starting.component.css

@@ -1,8 +1,7 @@
 .container {
     display: flex;
     flex-direction: column;
-    justify-content: center;
-    text-align: center;
+    align-items: center;
     width: 90%;
 }
 
@@ -11,10 +10,8 @@ h1 {
     font-size: 27px;
 }
 
-button {
-    background: -webkit-linear-gradient(#0cebeb, #20e3b2, #29ffc6);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
+a {
+    width: fit-content;
     font-size: 27px;
 }
 

Foodie/ClientApp/src/app/starting/starting.component.html

@@ -1,9 +1,6 @@
 <div class="container">
     <h1 class="text-center header mt-5"><b>Welcome!</b></h1>
     <h1 class="text-justify mt-4">This app will help you control your weight by managing your meals and tracking calorie intake. Add favorite products, create meals, supervise nutrition. </h1>
-    <a class="mt-4" [routerLink]='["/authentication/register"]' [state]='{ local: true }' title="Register"><button
-        mat-button>Sign up now!
-    </button></a>
-    <a class="mt-4" [routerLink]='["/authentication/login"]' [state]='{ local: true }' title="Login"><button mat-button >Sign in
-    </button></a>
-</div>
+    <a mat-button class="mt-4 transparent-button" [routerLink]='["/authentication/register"]' [state]='{ local: true }' title="Register">Sign up now!</a>
+    <a mat-button class="mt-4 transparent-button" [routerLink]='["/authentication/login"]' [state]='{ local: true }' title="Login">Sign in</a>
+</div>

Foodie/ClientApp/src/styles.scss

@@ -1,10 +1,11 @@
 /* You can add global styles to this file, and also import other style files */
 
-
 /* Provide sufficient contrast against white background */
 
-a {
-    color: #0366d6;
+@import 'styles/material-override';
+
+a:hover {
+    text-decoration: none;
 }
 
 code {
@@ -31,7 +32,7 @@ body {
 button:focus,
 button:active:focus,
 button.active:focus {
-outline: none !important;
+    outline: none !important;
     outline-style: none !important;
 }
 
@@ -40,7 +41,6 @@ outline: none !important;
     stroke: #20e3b2 !important;
 }
 
-
 /* FLOATING BUTTONS */
 
 .floating-buttons {
@@ -83,4 +83,4 @@ outline: none !important;
         opacity: 1;
         transform: scale(1);
     }
-}
+}

Foodie/ClientApp/src/styles/_material-override.scss

@@ -0,0 +1,11 @@
+.transparent-button {
+    --mat-mdc-focus-indicator-border-color: none;
+    --mat-focus-indicator-border-color: none;
+}
+
+.transparent-button .mdc-button__label {
+    background: -webkit-linear-gradient(#0cebeb, #20e3b2, #29ffc6);
+    -webkit-background-clip: text;
+    background-clip: text;
+    -webkit-text-fill-color: transparent;
+}