Copy Icons

theADAMJR · Aug 13, 2021 · 24e947b · 24e947b
1 parent a230e77
commit 24e947b
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 16 deletions.
diff --git a/frontend/src/components/navigation/sidebar/sidebar-icon.scoped.css b/frontend/src/components/navigation/sidebar/sidebar-icon.scoped.css
@@ -1,3 +1,7 @@
+img {
+  border-radius: inherit;
+}
+
 .selected {
   transition: width 0.3s ease;
 }
@@ -6,7 +10,7 @@
   height: 40px;
   margin-top: 4px;
 }
-.wrapper:hover .selected {
+.wrapper:not(.active):hover .selected {
   display: block;
   height: 20px;
   margin-top: 14px;

diff --git a/frontend/src/components/navigation/sidebar/sidebar-icon.tsx b/frontend/src/components/navigation/sidebar/sidebar-icon.tsx
@@ -1,4 +1,3 @@
-import { useSelector } from 'react-redux';
 import { useLocation } from 'react-router-dom';
 import environment from '../../../environment';
 import { getAbbr } from '../../../store/guilds';
@@ -8,35 +7,34 @@ import './sidebar-icon.scoped.css';
 export interface SidebarIconProps {
   imageURL?: string;
   name: string;
-  guildId?: string;
+  to?: string;
+  classes?: string;
 }
 
-const SidebarIcon: React.FunctionComponent<SidebarIconProps> = ({ guildId, imageURL, name }) => {  
-  const activeGuild = useSelector((s: Store.AppStore) => s.ui.activeGuild);
+const SidebarIcon: React.FunctionComponent<SidebarIconProps> = (props) => {
+  let { to, imageURL, name, classes = 'heading' } = props;
   const location = useLocation();
-
   if (imageURL)
     imageURL = `${environment.rootAPIURL}${imageURL}`;
 
   const Icon = () => (imageURL)
     ? <img
-        style={{borderRadius: 'inherit'}}
         className="h-12 w-12"
         src={imageURL}
         alt={name} />
-    : <span className="select-none heading h-12 w-12 flex items-center justify-center">{getAbbr(name)}</span>;
+    : <span className={`select-none flex items-center justify-center h-12 w-12`}>
+        {getAbbr(name)}
+      </span>;  
 
-  const isActive = activeGuild?.id === guildId
-    || imageURL && !guildId && location.pathname.startsWith('/channels/@me');
-
+  const isActive = to && location.pathname.startsWith(to);
   const activeClasses = (isActive)
     ? 'rounded-xl bg-primary'
     : 'rounded-full bg-bg-primary';
 
   return (
-    <div className={`${isActive && 'active'}`}>
-      <div className="selected rounded bg-white absolute -left-1 h-2 w-0" />
-      <div className={`cursor-pointer guild-icon flex justify-center mb-2 ${activeClasses}`}>
+    <div className={`wrapper ${isActive && 'active'}`}>
+      <div className="selected rounded bg-white absolute -left-1 h-0 w-2" />
+      <div className={`cursor-pointer guild-icon flex justify-center mb-2 ${activeClasses} ${classes}`}>
         <Icon />
       </div>
     </div>

diff --git a/frontend/src/components/navigation/sidebar/sidebar-icons.tsx b/frontend/src/components/navigation/sidebar/sidebar-icons.tsx
@@ -15,7 +15,7 @@ const SidebarIcons: React.FunctionComponent = () => {
     <ContextMenuTrigger key={g.id} id={g.id}>
       <Link to={`/channels/${g.id}`}>
         <SidebarIcon
-          guildId={g.id}
+          to={`/channels/${g.id}`}
           imageURL={g.iconURL}
           name={g.name} />
       </Link>
@@ -27,13 +27,18 @@ const SidebarIcons: React.FunctionComponent = () => {
   const PlusIcon = () => (
     <div
       onClick={() => dispatch(openedModal(CreateGuild))}
-      className="success text-3xl"><SidebarIcon name="+" /></div>
+      className="success text-3xl">
+      <SidebarIcon
+        name="+"
+        classes="success" />
+    </div>
   );
 
   return (
     <div className="h-screen float-left p-3 flex flex-col bg-bg-tertiary">
       <Link to="/channels/@me">
         <SidebarIcon
+          to="/channels/@me"
           imageURL={user.avatarURL}
           name={user.username} />
       </Link>