chore: update prettier tab width for consistency (#175)

2025-06-16 09:39:09 +00:00 · 2021-03-13 22:54:34 -05:00 · 2021-03-13 22:54:34 -05:00 · f24d2fcc99
commit f24d2fcc99
parent a931f8c69c
247 changed files with 7224 additions and 7375 deletions
--- a/packages/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx
+++ b/packages/design-system/molecules/server-listing-card/ServerListingCard.stories.tsx
@ -2,11 +2,11 @@ import { roleypolyGuild } from '../../fixtures/storyData';
 import { ServerListingCard } from './ServerListingCard';

 export default {
-    title: 'Molecules/Server Listing Card',
-    component: ServerListingCard,
-    args: {
-        guild: { ...roleypolyGuild, permissionLevel: 4 },
-    },
+  title: 'Molecules/Server Listing Card',
+  component: ServerListingCard,
+  args: {
+    guild: { ...roleypolyGuild, permissionLevel: 4 },
+  },
 };

 export const serverListingCard = (args) => <ServerListingCard {...args} />;
--- a/packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
+++ b/packages/design-system/molecules/server-listing-card/ServerListingCard.styled.ts
@ -5,86 +5,86 @@ 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;
-        `}
+  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;
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 `;

 export const PermissionTagStyled = styled.div<{ hiddenOnSmall?: boolean }>`
-    ${text200}
+  ${text200}

-    display: inline-block;
-    background-color: ${palette.taupe200};
-    padding: 4px 6px;
-    border-radius: 2px;
+  display: inline-block;
+  background-color: ${palette.taupe200};
+  padding: 4px 6px;
+  border-radius: 2px;

-    svg {
-        position: relative;
-        top: 1px;
-        ${onTablet(
-            css`
-                margin-right: 2px;
-            `
-        )}
-    }
+  svg {
+    position: relative;
+    top: 1px;
+    ${onTablet(
+      css`
+        margin-right: 2px;
+      `
+    )}
+  }

-    ${(props) =>
-        props.hiddenOnSmall &&
-        onSmallScreen(
-            css`
-                display: none;
-            `
-        )}
+  ${(props) =>
+    props.hiddenOnSmall &&
+    onSmallScreen(
+      css`
+        display: none;
+      `
+    )}
 `;

 export const CardBase = styled.div`
-    ${text500}
+  ${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;
+  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);
-    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;
-    `)}
+  ${onTablet(css`
+    flex-direction: column;
+    justify-content: left;
+  `)}
 `;
--- a/packages/design-system/molecules/server-listing-card/ServerListingCard.tsx
+++ b/packages/design-system/molecules/server-listing-card/ServerListingCard.tsx
@ -4,55 +4,55 @@ import { GuildSlug, UserGuildPermissions } from '@roleypoly/types';
 import * as React from 'react';
 import { GoPerson, GoStar, GoZap } from 'react-icons/go';
 import {
-    CardBase,
-    CardLine,
-    MaxWidthTitle,
-    PermissionTagStyled,
+  CardBase,
+  CardLine,
+  MaxWidthTitle,
+  PermissionTagStyled,
 } from './ServerListingCard.styled';

 type ServerListingProps = {
-    guild: GuildSlug;
+  guild: GuildSlug;
 };

 export const ServerListingCard = (props: ServerListingProps) => (
-    <CardBase>
-        <CardLine>
-            <Avatar
-                hash={props.guild.icon}
-                src={utils.avatarHash(props.guild.id, props.guild.icon, 'icons')}
-            >
-                {utils.initialsFromName(props.guild.name)}
-            </Avatar>
-        </CardLine>
-        <MaxWidthTitle>{props.guild.name}</MaxWidthTitle>
-        <CardLine left>
-            <PermissionTag permissionLevel={props.guild.permissionLevel} />
-        </CardLine>
-    </CardBase>
+  <CardBase>
+    <CardLine>
+      <Avatar
+        hash={props.guild.icon}
+        src={utils.avatarHash(props.guild.id, props.guild.icon, 'icons')}
+      >
+        {utils.initialsFromName(props.guild.name)}
+      </Avatar>
+    </CardLine>
+    <MaxWidthTitle>{props.guild.name}</MaxWidthTitle>
+    <CardLine left>
+      <PermissionTag permissionLevel={props.guild.permissionLevel} />
+    </CardLine>
+  </CardBase>
 );

 const PermissionTag = (props: { permissionLevel: UserGuildPermissions }) => {
-    switch (props.permissionLevel) {
-        case UserGuildPermissions.Admin:
-            return (
-                <PermissionTagStyled>
-                    <GoStar />
-                    <Collapse>Administrator</Collapse>
-                </PermissionTagStyled>
-            );
-        case UserGuildPermissions.Manager:
-            return (
-                <PermissionTagStyled>
-                    <GoZap />
-                    <Collapse>Role Manager</Collapse>
-                </PermissionTagStyled>
-            );
-        default:
-            return (
-                <PermissionTagStyled hiddenOnSmall>
-                    <GoPerson />
-                    <Collapse>Member</Collapse>
-                </PermissionTagStyled>
-            );
-    }
+  switch (props.permissionLevel) {
+    case UserGuildPermissions.Admin:
+      return (
+        <PermissionTagStyled>
+          <GoStar />
+          <Collapse>Administrator</Collapse>
+        </PermissionTagStyled>
+      );
+    case UserGuildPermissions.Manager:
+      return (
+        <PermissionTagStyled>
+          <GoZap />
+          <Collapse>Role Manager</Collapse>
+        </PermissionTagStyled>
+      );
+    default:
+      return (
+        <PermissionTagStyled hiddenOnSmall>
+          <GoPerson />
+          <Collapse>Member</Collapse>
+        </PermissionTagStyled>
+      );
+  }
 };