Fixed home page styles for bootstrap 5

src/common/Home.scss

@@ -1,6 +1,10 @@
 @import '../utils/base';
 @import '../utils/mixins/vertical-align';
 
+$mainCardWidth: 720px;
+$totalColumns: 12;
+$logoColumns: 5;
+
 .home {
   position: relative;
   padding-top: 15px;
@@ -21,12 +25,12 @@
 .home__logo {
   @include vertical-align();
 
-  width: calc(100% - 3rem);
+  width: calc(#{$mainCardWidth / $totalColumns * $logoColumns} - 3rem);
 }
 
 .home__main-card {
   margin: 0 auto;
-  max-width: 720px;
+  max-width: $mainCardWidth;
 
   @media (min-width: $mdMin) {
     @include vertical-align();

src/servers/ServersListGroup.scss

@@ -17,6 +17,10 @@
   padding: .75rem 2.5rem .75rem 1rem;
 }
 
+.servers-list__server-item:not(:hover) {
+  color: $mainColor;
+}
+
 .servers-list__server-item:hover {
   background-color: var(--secondary-color);
 }

src/utils/theme/index.ts

@@ -12,14 +12,8 @@ export const PRIMARY_DARK_COLOR = '#161b22';
 
 export type Theme = 'dark' | 'light';
 
-export const changeThemeInMarkup = (theme: Theme) => {
-  const html = document.getElementsByTagName('html');
+export const changeThemeInMarkup = (theme: Theme) =>
+  document.getElementsByTagName('html')?.[0]?.setAttribute('data-theme', theme);
 
-  html?.[0]?.setAttribute('data-theme', theme);
-};
-
-export const isDarkThemeEnabled = (): boolean => {
-  const html = document.getElementsByTagName('html');
-
-  return html?.[0]?.getAttribute('data-theme') === 'dark';
-};
+export const isDarkThemeEnabled = (): boolean =>
+  document.getElementsByTagName('html')?.[0]?.getAttribute('data-theme') === 'dark';