Merge pull request #208 from jedmund/update-updates

Various small fixes and improvements

components/DropdownMenuContent/index.scss

@@ -14,6 +14,13 @@
   }
 }
 
+.MenuLabel {
+  color: var(--text-tertiary);
+  padding: $unit * 1.5 $unit * 1.5;
+  font-size: $font-small;
+  font-weight: $medium;
+}
+
 .MenuItem {
   color: var(--text-tertiary);
   font-weight: $normal;

components/GridRep/index.tsx

@@ -136,7 +136,16 @@ const GridRep = (props: Props) => {
           src={`/profile/${props.user.avatar.picture}.png`}
         />
       )
-    } else return <div className="no-user" />
+    } else
+      return (
+        <img
+          alt={t('no_user')}
+          className={`profile anonymous`}
+          srcSet={`/profile/npc.png,
+                            /profile/npc@2x.png 2x`}
+          src={`/profile/npc.png`}
+        />
+      )
   }
 
   const linkedAttribution = () => (

components/Header/index.tsx

@@ -19,6 +19,7 @@ import {
   DropdownMenuGroup,
   DropdownMenuItem,
   DropdownMenuSeparator,
+  DropdownMenuLabel,
 } from '~components/DropdownMenuContent'
 import LoginModal from '~components/LoginModal'
 import SignupModal from '~components/SignupModal'
@@ -248,7 +249,15 @@ const Header = () => {
         />
       )
     } else {
-      image = <div className="profile placeholder" />
+      image = (
+        <img
+          alt={t('no_user')}
+          className={`profile anonymous`}
+          srcSet={`/profile/npc.png, 
+                      /profile/npc@2x.png 2x`}
+          src={`/profile/npc.png`}
+        />
+      )
     }
 
     return image
@@ -422,7 +431,7 @@ const Header = () => {
                   href={`/${accountState.account.user.username}` || ''}
                   passHref
                 >
-                  Your profile
+                  <span>{t('menu.profile')}</span>
                 </Link>
               </DropdownMenuItem>
               <DropdownMenuItem className="MenuItem" onClick={closeLeftMenu}>
@@ -473,6 +482,9 @@ const Header = () => {
       items = (
         <>
           <DropdownMenuGroup className="MenuGroup">
+            <DropdownMenuLabel className="MenuLabel">
+              {account.user ? `@${account.user.username}` : t('no_user')}
+            </DropdownMenuLabel>
             <DropdownMenuItem className="MenuItem">
               <Link href="/new">
                 <a onClick={(e: React.MouseEvent) => handleNewParty(e, '/new')}>
@@ -482,7 +494,7 @@ const Header = () => {
             </DropdownMenuItem>
             <DropdownMenuItem className="MenuItem">
               <Link href={`/${account.user.username}` || ''} passHref>
-                Your profile
+                <span>{t('menu.profile')}</span>
               </Link>
             </DropdownMenuItem>
           </DropdownMenuGroup>

components/PartyDetails/index.tsx

@@ -403,7 +403,16 @@ const PartyDetails = (props: Props) => {
           src={`/profile/${picture}.png`}
         />
       )
-    else return <div className="no-user" />
+    else
+      return (
+        <img
+          alt={t('no_user')}
+          className={`profile anonymous`}
+          srcSet={`/profile/npc.png,
+                            /profile/npc@2x.png 2x`}
+          src={`/profile/npc.png`}
+        />
+      )
   }
 
   const userBlock = (username?: string, picture?: string, element?: string) => {
@@ -691,20 +700,36 @@ const PartyDetails = (props: Props) => {
       <section className={readOnlyClasses}>
         <section className="Details">
           <Token
-            className={classNames({ ChargeAttack: true, On: chargeAttack })}
+            className={classNames({
+              ChargeAttack: true,
+              On: chargeAttack,
+              Off: !chargeAttack,
+            })}
           >
             {`${t('party.details.labels.charge_attack')} ${
               chargeAttack ? 'On' : 'Off'
             }`}
           </Token>
 
-          <Token className={classNames({ FullAuto: true, On: fullAuto })}>
+          <Token
+            className={classNames({
+              FullAuto: true,
+              On: fullAuto,
+              Off: !fullAuto,
+            })}
+          >
             {`${t('party.details.labels.full_auto')} ${
               fullAuto ? 'On' : 'Off'
             }`}
           </Token>
 
-          <Token className={classNames({ AutoGuard: true, On: autoGuard })}>
+          <Token
+            className={classNames({
+              AutoGuard: true,
+              On: autoGuard,
+              Off: !autoGuard,
+            })}
+          >
             {`${t('party.details.labels.auto_guard')} ${
               fullAuto ? 'On' : 'Off'
             }`}

components/Token/index.scss

@@ -22,4 +22,8 @@
     background: var(--auto-guard-bg);
     color: var(--auto-guard-text);
   }
+
+  &.Off {
+    color: var(--text-secondary);
+  }
 }

public/locales/en/common.json

@@ -303,6 +303,7 @@
     "language": "Language",
     "login": "Log in",
     "roadmap": "Roadmap",
+    "profile": "Your profile",
     "saved": "Saved",
     "settings": "Settings",
     "signup": "Sign up",

public/locales/ja/common.json

@@ -303,6 +303,7 @@
     "guides": "攻略",
     "language": "言語",
     "login": "ログイン",
+    "profile": "プロフィール",
     "roadmap": "ロードマップ",
     "saved": "保存した編成",
     "settings": "アカウント設定",

styles/globals.scss

@@ -249,6 +249,10 @@ img.profile {
   &.light {
     background: $light-bg-20;
   }
+
+  &.anonymous {
+    background: var(--anonymous-bg);
+  }
 }
 
 i.tag {

styles/themes.scss

@@ -25,7 +25,7 @@
 
   --selected-item-bg: #{$selected--item--bg--light};
   --selected-item-bg-hover: #{$selected--item--bg--light--hover};
-
+  --anonymous-bg: #{$anonymous--bg--light};
   --placeholder-bg: #{$grey-80};
 
   // Light - Menus
@@ -164,6 +164,7 @@
   --selected-item-bg: #{$selected--item--bg--dark};
   --selected-item-bg-hover: #{$selected--item--bg--dark--hover};
 
+  --anonymous-bg: #{$anonymous--bg--dark};
   --placeholder-bg: #{$grey-40};
 
   // Dark - Dialogs

styles/variables.scss

@@ -148,6 +148,9 @@ $page--element--bg--dark: $grey-40;
 $separator--bg--light: $grey-90;
 $separator--bg--dark: $grey-15;
 
+$anonymous--bg--light: $grey-80;
+$anonymous--bg--dark: $grey-40;
+
 // Color Definitions: Dialog
 $dialog--bg--light: $grey-100;
 $dialog--bg--dark: $grey-25;