- Tweaks to UI

- Added clone copy field
codeplaysoftware · Sep 13, 2024 · d63e390 · d63e390
1 parent 7024c91
commit d63e390
Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/...ystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.html b/...ystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.html
@@ -24,7 +24,7 @@ <h2>{{ project.description }}</h2>
   <main>
     @if (loading() == LoadingState.LOAD_SUCCESS) {
       <article>
-        <div [innerHTML]="readme()"></div>
+        <div class="content" [innerHTML]="readme()"></div>
       </article>
     } @else if(loading() == LoadingState.LOAD_FAILURE) {
       <div class="warning">
@@ -38,6 +38,7 @@ <h1>No Read Me Found</h1>
       <st-loading></st-loading>
     }
     <footer>
+      <st-copy-input [content]="project.url" title="Clone"></st-copy-input>
       <a class="button centered" [href]="project.url" target="_blank">
         <span class="material-symbols-outlined">link</span> View on GitHub
       </a>

diff --git a/...ystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.scss b/...ystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.scss
@@ -11,6 +11,7 @@
     padding-top: 5rem;
     padding-bottom: 5rem;
     align-items: flex-start;
+    background-color: var(--color-blue);
 
     h1 {
       font-size: 2rem;
@@ -24,13 +25,9 @@
     .tags {
       display: flex;
       flex-wrap: wrap;
-      gap: .2rem;
+      gap: .3rem;
       margin-top: 2rem;
     }
-
-    ::ng-deep st-tag > div {
-      background-color: #bd2d00 !important;
-    }
   }
 
   article {
@@ -39,16 +36,19 @@
     font-size: 1rem;
     max-width: 600px;
 
-    ::ng-deep {
-      pre code {
-        display: block;
-        background-color: var(--color-blue);
-        color: var(--color-white);
-        border-radius: var(--border-radius);
-        padding: 1rem;
-        overflow: auto;
-        word-break: break-word;
-      }
+    ::ng-deep h1 {
+      display: none;
+    }
+  }
+
+  footer {
+    st-copy-input {
+      flex: 1;
+    }
+
+    a.button {
+      width: auto;
+      background: var(--color-orange) !important;
     }
   }
 }
diff --git a/...osystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.ts b/...osystem/projects/shared/project-widget/project-view-popup/project-view-popup.component.ts
@@ -30,6 +30,7 @@ import { MarkdownComponent } from 'ngx-markdown';
 import { LoadingState } from '../../../../../../shared/LoadingState';
 import { LoadingComponent } from '../../../../../../shared/components/loading/loading.component';
 import { RouterLink } from '@angular/router';
+import { CopyInputComponent } from '../../../../../../shared/components/copy-input/copy-input.component';
 
 @Component({
   selector: 'st-project-view-popup',
@@ -41,9 +42,11 @@ import { RouterLink } from '@angular/router';
     LayeredContributorAvatarsComponent,
     MarkdownComponent,
     LoadingComponent,
-    RouterLink
+    RouterLink,
+    CopyInputComponent
   ],
   styleUrls: [
+    '../../../../../getting-started/academy/lesson/lesson-content-styling.scss',
     '../../../../../../shared/components/popup/styles/common.scss',
     '../../../../../../shared/components/popup/styles/side-header.scss',
     './project-view-popup.component.scss'