fix styles depends on button

Awakich · Awakich · commit fd3a2c2eb377 · 2025-09-03T15:31:04.000+03:00
diff --git a/projects/skills/src/app/skills/shared/skill-card/skill-card.component.scss b/projects/skills/src/app/skills/shared/skill-card/skill-card.component.scss
@@ -4,9 +4,9 @@
   display: flex;
   flex-direction: column;
   gap: 16px;
+  height: 220px;
   padding: 20px;
   margin-bottom: 20px;
-  height: 220px;
   cursor: pointer;
   border: 1px solid var(--grey-button);
   border-radius: 15px;
diff --git a/projects/skills/src/styles/_colors.scss b/projects/skills/src/styles/_colors.scss
@@ -4,21 +4,21 @@
 
 :root {
   // ACCENT
-  --gradient: linear-gradient(90deg, #242424 0%, #8A63E6 50%);
-  --gradient-mild: linear-gradient(90deg, #501d53 0.3%, #3b1f72 22%, #8A63E6 100%);
-  --accent: #8A63E6;
-  --accent-dark: #{color.adjust(#8A63E6, $blackness: 20%)};
+  --gradient: linear-gradient(90deg, #242424 0%, #8a63e6 50%);
+  --gradient-mild: linear-gradient(90deg, #501d53 0.3%, #3b1f72 22%, #8a63e6 100%);
+  --accent: #8a63e6;
+  --accent-dark: #{color.adjust(#8a63e6, $blackness: 20%)};
   --accent-mild: #{color.adjust(#6c27ff, $alpha: -0.4)};
-  --accent-light: #9A80E6;
+  --accent-light: #9a80e6;
 
   // GOLD
   --gold: #f6ff8b;
   --gold-dark: #f7cf4d;
 
   // GRAY
-  --white: #FAFAFA;
-  --black: #333333;
-  --dark-grey: #E7E7E7;
+  --white: #fafafa;
+  --black: #333;
+  --dark-grey: #e7e7e7;
   --gray: #d3d3d3;
   --light-gray: #f9f9f9;
   --grey-button: #e5e5e5e5;
@@ -27,9 +27,9 @@
   --grey-for-text: #a59fb9;
 
   // FUNCTIONAL
-  --green: #88C9A1;
+  --green: #88c9a1;
   --light-green: #97ecb8;
-  --red: #D48A9E;
-  --red-dark: #{color.adjust(#D48A9E, $blackness: 10%)};
+  --red: #d48a9e;
+  --red-dark: #{color.adjust(#d48a9e, $blackness: 10%)};
   --light-red: #e8a5b7;
 }
diff --git a/projects/social_platform/src/app/ui/components/button/button.component.scss b/projects/social_platform/src/app/ui/components/button/button.component.scss
@@ -18,7 +18,7 @@
 
     &:hover {
       background-color: var(--accent-light);
-      box-shadow: -2px 3px 3px rgba(51, 51, 51, 0.2);
+      box-shadow: -2px 3px 3px rgb(51 51 51 / 20%);
     }
 
     ::ng-deep *:not(.dot-wave) {
@@ -74,8 +74,8 @@
     }
 
     &.button--big {
-      padding: 12px 24px;
       width: 100%;
+      padding: 12px 24px;
     }
 
     &.button--no-border {
@@ -120,8 +120,8 @@
     }
 
     &.button--big {
-      padding: 12px 24px;
       width: 100%;
+      padding: 12px 24px;
     }
 
     &.button--no-border {
diff --git a/projects/social_platform/src/styles/_colors.scss b/projects/social_platform/src/styles/_colors.scss
@@ -4,29 +4,29 @@
 
 :root {
   // ACCENT
-  --gradient: linear-gradient(90deg, #242424 0%, #8A63E6 50%);
-  --gradient-mild: linear-gradient(90deg, #501d53 0.3%, #3b1f72 22%, #8A63E6 100%);
-  --accent: #8A63E6;
-  --accent-dark: #{color.adjust(#8A63E6, $blackness: 20%)};
+  --gradient: linear-gradient(90deg, #242424 0%, #8a63e6 50%);
+  --gradient-mild: linear-gradient(90deg, #501d53 0.3%, #3b1f72 22%, #8a63e6 100%);
+  --accent: #8a63e6;
+  --accent-dark: #{color.adjust(#8a63e6, $blackness: 20%)};
   --accent-mild: #{color.adjust(#6c27ff, $alpha: -0.4)};
-  --accent-light: #9A80E6;
+  --accent-light: #9a80e6;
 
   // GOLD
   --gold: #f6ff8b;
   --gold-dark: #f7cf4d;
 
   // GRAY
-  --white: #FAFAFA;
-  --black: #333333;
-  --dark-grey: #E7E7E7;
+  --white: #fafafa;
+  --black: #333;
+  --dark-grey: #e7e7e7;
   --gray: #d3d3d3;
   --light-gray: #f9f9f9;
   --grey-button: #e5e5e5e5;
   --medium-grey-for-outline: #eee;
   --grey-for-text: #a59fb9;
 
   // FUNCTIONAL
-  --green: #88C9A1;
-  --red: #D48A9E;
-  --red-dark: #{color.adjust(#D48A9E, $blackness: 10%)};
+  --green: #88c9a1;
+  --red: #d48a9e;
+  --red-dark: #{color.adjust(#d48a9e, $blackness: 10%)};
 }
diff --git a/projects/social_platform/src/styles/pages/_project-detail.scss b/projects/social_platform/src/styles/pages/_project-detail.scss
@@ -17,7 +17,6 @@
   }
 
   app-button ::ng-deep .button--inline {
-
     @include responsive.apply-desktop {
       min-height: 52px;
     }
diff --git a/projects/ui/src/lib/components/layout/invite-manage-card/invite-manage-card.component.scss b/projects/ui/src/lib/components/layout/invite-manage-card/invite-manage-card.component.scss
@@ -42,7 +42,7 @@
 
   &__actions {
     display: flex;
-    margin-top: 16px;
     gap: 12px;
+    margin-top: 16px;
   }
 }

Original file line number	Diff line number	Diff line change
`@@ -18,7 +18,7 @@`
`18`	`18`
`19`	`19`	`&:hover {`
`20`	`20`	`background-color: var(--accent-light);`
`21`		`- box-shadow: -2px 3px 3px rgba(51, 51, 51, 0.2);`
	`21`	`+ box-shadow: -2px 3px 3px rgb(51 51 51 / 20%);`
`22`	`22`	`}`
`23`	`23`
`24`	`24`	`::ng-deep *:not(.dot-wave) {`
`@@ -74,8 +74,8 @@`
`74`	`74`	`}`
`75`	`75`
`76`	`76`	`&.button--big {`
`77`		`- padding: 12px 24px;`
`78`	`77`	`width: 100%;`
	`78`	`+ padding: 12px 24px;`
`79`	`79`	`}`
`80`	`80`
`81`	`81`	`&.button--no-border {`
`@@ -120,8 +120,8 @@`
`120`	`120`	`}`
`121`	`121`
`122`	`122`	`&.button--big {`
`123`		`- padding: 12px 24px;`
`124`	`123`	`width: 100%;`
	`124`	`+ padding: 12px 24px;`
`125`	`125`	`}`
`126`	`126`
`127`	`127`	`&.button--no-border {`
Original file line number	Diff line number	Diff line change
`@@ -17,7 +17,6 @@`
`17`	`17`	`}`
`18`	`18`
`19`	`19`	`app-button ::ng-deep .button--inline {`
`20`		`-`
`21`	`20`	`@include responsive.apply-desktop {`
`22`	`21`	`min-height: 52px;`
`23`	`22`	`}`
Original file line number	Diff line number	Diff line change
`@@ -42,7 +42,7 @@`
`42`	`42`
`43`	`43`	`&__actions {`
`44`	`44`	`display: flex;`
`45`		`- margin-top: 16px;`
`46`	`45`	`gap: 12px;`
	`46`	`+ margin-top: 16px;`
`47`	`47`	`}`
`48`	`48`	`}`