feat: Update Upstream Icon Info

Author: ChrisChV

src/course-outline/card-header/TitleButton.tsx

@@ -47,7 +47,9 @@ const TitleButton = ({
         onClick={onTitleClick}
         title={title}
       >
-        {prefixIcon}
+        <div className="mr-2">
+          {prefixIcon}
+        </div>
         <span className={`${namePrefix}-card-title mb-0 truncate-1-line`}>
           {title}
         </span>

src/course-outline/card-header/TitleLink.tsx

@@ -22,8 +22,10 @@ const TitleLink = ({
     to={titleLink}
     title={title}
   >
-    {prefixIcon}
-    <span className={`${namePrefix}-card-title mb-0 truncate-1-line`}>
+    <div className="mr-2">
+      {prefixIcon}
+    </div>
+    <span className={`${namePrefix}-card-title mb-0 truncate-1-line text-left`}>
       {title}
     </span>
   </Button>

src/course-outline/section-card/SectionCard.tsx

@@ -257,7 +257,7 @@ const SectionCard = ({
       isExpanded={isExpanded}
       onTitleClick={handleExpandContent}
       namePrefix={namePrefix}
-      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} />}
+      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="md" />}
     />
   );
 

src/course-outline/subsection-card/SubsectionCard.tsx

@@ -205,7 +205,7 @@ const SubsectionCard = ({
       isExpanded={isExpanded}
       onTitleClick={handleExpandContent}
       namePrefix={namePrefix}
-      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} />}
+      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="sm" />}
     />
   );
 

src/course-outline/unit-card/UnitCard.tsx

@@ -170,7 +170,7 @@ const UnitCard = ({
       title={displayName}
       titleLink={getTitleLink(id)}
       namePrefix={namePrefix}
-      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="sm" />}
+      prefixIcon={<UpstreamInfoIcon upstreamInfo={upstreamInfo} size="xs" />}
     />
   );
 

src/generic/styles.scss

@@ -15,3 +15,4 @@
 @import "./modal-iframe";
 @import "./alert-message";
 @import "./inplace-text-editor/InplaceTextEditor";
+@import "./upstream-info-icon/UpstreamInfoIcon";

src/generic/upstream-info-icon/UpstreamInfoIcon.scss

@@ -0,0 +1,21 @@
+.upstream-info-icon {
+  &.size-md {
+    width: 32px;
+    height: 26px;
+  }
+
+  &.size-sm {
+    width: 28px;
+    height: 22px;
+  }
+
+  &.size-xs {
+    width: 24px;
+    height: 18px;
+  }
+
+  .pgn__icon {
+    // Removes the right margin
+    margin-right: 0 !important;
+  }
+};

src/generic/upstream-info-icon/index.tsx

@@ -32,10 +32,12 @@ export const UpstreamInfoIcon: React.FC<UpstreamInfoIconProps> = ({ upstreamInfo
     };
 
   return (
-    <Icon
-      {...iconProps}
-      size={size}
-      className="mr-1"
-    />
+    <div className={`upstream-info-icon size-${size} box-shadow-centered-1 d-flex justify-content-center`}>
+      <Icon
+        {...iconProps}
+        size={size}
+        className="mr-1"
+      />
+    </div>
   );
 };