chore: restructure project into yarn workspaces, remove next

packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts

@@ -0,0 +1,90 @@
+import { onSmallScreen, onTablet } from '@roleypoly/design-system/atoms/breakpoints';
+import { palette } from '@roleypoly/design-system/atoms/colors';
+import { transitions } from '@roleypoly/design-system/atoms/timings';
+import { text200, text500 } from '@roleypoly/design-system/atoms/typography';
+import styled, { css } from 'styled-components';
+
+export const CardLine = styled.div<{ left?: boolean }>`
+    justify-content: center;
+    align-items: center;
+    display: flex;
+    padding: 5px;
+    box-sizing: border-box;
+    ${(props) =>
+        props.left &&
+        css`
+            flex: 1;
+            justify-content: flex-end;
+            align-items: flex-end;
+        `}
+`;
+
+export const MaxWidthTitle = styled.div`
+    max-width: 100%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+`;
+
+export const PermissionTagStyled = styled.div<{ hiddenOnSmall?: boolean }>`
+    ${text200}
+
+    display: inline-block;
+    background-color: ${palette.taupe200};
+    padding: 4px 6px;
+    border-radius: 2px;
+
+    svg {
+        position: relative;
+        top: 1px;
+        ${onTablet(
+            css`
+                margin-right: 2px;
+            `
+        )}
+    }
+
+    ${(props) =>
+        props.hiddenOnSmall &&
+        onSmallScreen(
+            css`
+                display: none;
+            `
+        )}
+`;
+
+export const CardBase = styled.div`
+    ${text500}
+
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    background-color: ${palette.taupe300};
+    overflow-x: hidden;
+    text-align: center;
+    display: flex;
+    align-items: center;
+    padding: 10px;
+    border-radius: 3px;
+    cursor: pointer;
+    user-select: none;
+    transform: translate(0);
+    transition: transform ease-in-out ${transitions.actionable}s,
+        box-shadow ease-in-out ${transitions.actionable}s,
+        border-color ease-in-out ${transitions.out2in}s;
+    box-sizing: border-box;
+    max-width: 98vw;
+    :hover {
+        box-shadow: 0 2px 2px rgba(0, 0, 0, 0.25);
+        transform: translate(0, -1px);
+    }
+    :active {
+        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
+        transform: translate(0);
+    }
+
+    ${onTablet(css`
+        flex-direction: column;
+        justify-content: left;
+    `)}
+`;