Add almost complete new stars theme.

frontend/src/components/channel/message/message-content.tsx

@@ -29,7 +29,7 @@ const MessageContent: FunctionComponent<MessageContentProps> = ({ message }) =>
       {message.attachmentURLs?.map(imageURL =>
         <img
           key={imageURL}
-          style={{ maxWidth: '384px' }}
+          style={{ maxWidth: '384px', maxHeight: '384px' }}
           className="my-2 cursor-pointer"
           onClick={() => dispatch(previewImage(imageURL))}
           src={process.env.REACT_APP_CDN_URL + imageURL}

frontend/src/components/modals/user-settings/user-settings-themes.tsx

@@ -165,17 +165,20 @@ const UserSettingsThemes: React.FunctionComponent = () => {
               register={register}
               options={{ value: theme.name }} />
 
-            <div className="mt-8 bg-bg-secondary w-1/2 h-10 rounded-md p-2">
+            <div className="bg-bg-secondary w-1/2 h-10 rounded-md p-2">
+              <label className="uppercase text-xs font-semibold">Share URL</label>
+              <div className='mt-1.5'>
                 <CircleButton
                   role="button"
                   style={{ color: 'var(--font)', borderColor: 'var(--font)' }}
                   onClick={copyCode}
                   className="float-right py-0">Copy</CircleButton>
                 <span className="text-lg">
-                <span className='muted'>{shortURL + '/themes/'}</span>
-                <span className='primary'>{theme?.code}</span>
+                  <span className='text-base muted'>{shortURL + '/themes/'}</span>
+                  <span className='text-base primary'>{theme?.code}</span>
                 </span>
               </div>
+            </div>
             {/* <Input
               disabled
               // disabled={!selfIsManager}

frontend/src/components/modals/user-settings/user-settings.tsx

@@ -32,7 +32,7 @@ const UserSettings: React.FunctionComponent = () => {
               tabs={[
                 { name: 'Overview', id: 'overview' },
                 { name: 'Security', id: 'security' },
-                { name: <>Themes <NewBadge /></>, id: 'themes' },
+                { name: 'Themes', id: 'themes' },
                 { name: 'Advanced', id: 'advanced' },
               ]} />
             <div className="rounded-sm bg-bg-modifier-accent h-px w-42 my-2 mx-2.5 " />

frontend/src/components/navigation/sidebar/sidebar-icon.tsx

@@ -28,7 +28,7 @@ const SidebarIcon: React.FunctionComponent<SidebarIconProps> = (props) => {
 
   const Icon = () => (imageURL)
     ? <Image
-      className="h-12 w-12"
+      className="object-scale-down h-12 w-12"
       src={imageURL}
       alt={name} />
     : <span className="select-none flex items-center justify-center h-12 w-12">{getAbbr(name)}</span>;

frontend/src/store/themes.ts

@@ -44,7 +44,7 @@ const slice = createSlice({
     code: 'new_stars',
     createdAt: new Date('30/12/2021'),
     creatorId: process.env.REACT_APP_OWNER_USER_ID,
-    iconURL: '/images/themes/.svg',
+    iconURL: '/images/themes/star-satellites.png',
     isFeatured: true,
     name: 'New Stars (built-in)',
     styles: newStarsTheme,

frontend/src/styles/theme/new-stars-theme.css

@@ -1,4 +1,5 @@
 /* newstarsgame.com */
+/* Icon: Star satellites icon - by Lorc under CC-BY-3.0 - https://game-icons.net */
 :root {
   --primary: yellow;
   --secondary: yellow;
@@ -52,6 +53,7 @@ body {
 div.ReactModal__Content:not(.w-full),
 .sidebar-icons *,
 .context-menu,
+.input,
 input,
 textarea,
 label+* {

frontend/src/styles/theme/theme-util.css

@@ -47,6 +47,10 @@ textarea:focus {
   border: 1px solid var(--primary);
 }
 
+.object-scale-down {
+  object-fit: scale-down;
+}
+
 /* Util */
 .light {
   color: var(--light);