Nikolas/enhancement/564 update clan page

frontend-next-migration/src/entities/Clan/config/clanLabelIcons.ts

@@ -0,0 +1,17 @@
+import { ClanLabel } from '../enum/clanLabel.enum';
+import type { StaticImageData } from 'next/image';
+import iconSpammer from '@/shared/assets/images/clanLabels/ClanLabelSpammer.png';
+import iconHumorous from '@/shared/assets/images/clanLabels/ClanLabelHumorous.png';
+import iconAnimalLovers from '@/shared/assets/images/clanLabels/ClanLabelAnimalLovers.png';
+
+const CLAN_LABEL_ICON_MAP: Partial<Record<ClanLabel, StaticImageData>> = {
+    [ClanLabel.SPÄMMÄÄJÄT]: iconSpammer,
+    [ClanLabel.HUUMORINTAJUISET]: iconHumorous,
+    [ClanLabel.ELÄINRAKKAAT]: iconAnimalLovers,
+};
+
+// Temporary fallback icon for labels without a specific icon
+const CLAN_LABEL_FALLBACK_ICON = iconSpammer;
+
+export const getClanLabelIcon = (label: string) =>
+    CLAN_LABEL_ICON_MAP[label as ClanLabel] ?? CLAN_LABEL_FALLBACK_ICON;

frontend-next-migration/src/preparedPages/ClanPages/ui/ClanAllSubPage/ClanAllSubPage.module.scss

@@ -1,87 +1,94 @@
-.ClanTable {
-  overflow-y: auto;
-  overflow-x: hidden;
-  border-collapse: collapse;
-  max-width: 100px;
-  font: var(--font-dm-m);
-
-  th,
-  td {
-    padding: 0px 10px;
-    border-bottom: 1px solid rgba(255, 0, 0, 0.11);
-    white-space: nowrap;
-    word-wrap: break-word;
-  }
-
-
-  th {
-    background-color: rgb(100, 84, 66);
-    text-align: left;
-  }
-
-  tr:hover {
-    cursor: pointer;
+.Container {
+  max-width: var(--content-width);
+  margin: 0 auto;
+}
 
-    &:hover {
-      //@include link-scale-effect;
-      background-color: rgba(203, 15, 15, 0.47) !important;
-    }
-  }
+.TitleBar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 1rem;
+  margin-bottom: 1rem;
+}
 
-  tr {
-    height: 40px;
-    border-collapse: collapse;
-    white-space: nowrap;
-    word-wrap: break-word;
-  }
+.SearchBar {
+  display: flex;
+  height: 20px;
+  justify-content: left;
+  color: var(--primary-color);
+  border: 2px solid var(--black);
+  box-shadow: var(--black) 4px 4px 0;
+  border-radius: 1.5em;
+  background: var(--base-card-background);
+  align-items: center;
+  padding: 1em;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  font: var(--font-dm-m);
+}
 
+.Input {
+  color: var(--primary-color);
+  padding-left: 1em;
+  border: none;
+  background: transparent;
+  outline: none;
+  width: 100%;
+}
 
+.SearchBarDesktop {
+  width: 200px;
 }
 
-.ClanCard {
-  border: 1px solid #ddd;
-  padding: 10px;
-  margin-bottom: 10px;
-  border-radius: var(--border-radius-custom);
-  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+.SearchBarMobile {
+  width: 280px;
+  max-width: 90%;
+  margin: 0.5rem auto 1rem;
+}
 
-  div {
-    cursor: pointer;
-    margin-bottom: 8px;
-  }
+.SearchBarTablet {
+  width: 280px;
+  max-width: 90%;
+  margin: 0.5rem auto 1rem;
 }
 
+main :where(.SearchBarDesktop, .SearchBarMobile) {
+  overflow: visible;
+}
 
-.Loader {
-  @include position-absolute-center;
+.DesktopCardContainer {
+  display: flex;
+  padding-top: 1em;
+  justify-content: left;
+  flex-wrap: wrap;
+  gap: 1em;
 }
 
-.Buttons {
+.MobileCardContainer {
+  --gap: 0.45rem;
+  --row-gap: 0.95rem;
   display: flex;
-  flex-direction: row;
-  justify-content: center;
-  gap: 20px;
+  flex-wrap: wrap;
+  column-gap: var(--gap);
+  row-gap: var(--row-gap);
+  justify-content: flex-start;
+  align-items: flex-start;
   width: 100%;
-  margin-top: 5%;
+  padding-inline: 0;
+  margin-top: 0.25rem;
 }
 
-.titleText {
-  font: var(--font-dm-bold-xl);
-  text-align: center;
-  margin-bottom: 20px;
+.MobileCardItemWrap {
+  box-sizing: border-box;
+  flex: 0 0 calc((100% - 2 * var(--gap)) / 3);
+  display: flex;
+  justify-content: center;
+  min-width: 0;
 }
 
-.notFound {
-  text-align: left;
+.MobileCardItem {
+  width: 100% !important;
+  height: auto !important;
+  max-width: 100%;
+  display: block;
 }
-
-.BtnGame {
-  background-color: var(--black) !important;
-
-
-  //line height: ;
-  font: var(--font-dm-m) !important;
-  white-space: nowrap;
-  min-width: fit-content;
-  //border: solid 1px var(--primary-color);
-}