Branding updates, asset referencing scheme & Shoelace icons #292

Shrinks99 · 2024-03-22T05:52:46Z

Fixes #291

Changes

Updates ReplayWebpage branding!
- The new logo and type lockup is now used everywhere the old graphics were used
- The embed now uses the ReplayWebpage logo!
- Adds the new logo to README wrapped in an H1 with alt text. This logo will change the text color based on the GitHub light / dark theme the user has selected.
- Adds new app icons for macOS and Windows
- Adds new favicons & web manifest app icons
Removes fa-icon adds sl-icon
- Partially addresses Update location bar buttons #237 — That issue should be re-scoped and should cover converting them to Shoelace icon buttons.
- Removed the few imported bootstrap icons that were used in the embed
- ~~Changes icons to align with ReplayWebpage 2.0 mockups~~
- Moves nav bar icons to align with ReplayWebpage 2.0 mockups
Changes how images are imported across the whole app!
- Importing an SVG or WEBP image will now import it as a path to be used in an <img src=""/> attribute.
- Mirrors how we do things in Browsertrix! :)
Updates text in various places
- Adheres to new terminology
- Removes outdated references to WBN archives
Unhides the load button on smaller screen sizes
Improves navigation at smaller screen sizes
- Moves main navigation buttons from the dropdown back to the nav bar on mobile
- Does not add the sidebar back to the main nav bar as this sends the user to the full page non-sidebar version of the navigator and it can be confusing to try and get back to the page you were looking at but have that option be unavailable.

Caveats

The logo is no longer animated on loading
- I would like to address this one later with an SVG animation that only runs when loading actions are taking place to better emphasize when a loading action is occurring
The app logo in the top left doesn't collapse to remove the text on mobile
- Probably not that hard to add a switch between brandLockupColor and rwpLogo but I don't know if we have that available to us in JS? Pls advise <3
Doesn't update any of the brand colours outside of logos
- Would like to standardize with Browsertrix once components get replaced, preferably from a unified design token library of values.
Does not link to new docs domain that will be used for ReplayWebpage V2 Documentation Update #250, should be added in a followup PR to dev 2.0 once that's in main

Screenshots!

New VS old mobile menus

App icon on the service worker broken page

App icons in the embed

New macOS app icon!

- Missing 3D manifest icons (WIP!)

Adds ~assets directory, duped the setup in Browsertrix

Mirrors Browsertrix, nearly all of this was copied from there! - Adds custom app icon library - Adds the shoelace base path icon library - Sets up Webpack to copy shoelace assets and custom icon library assets - Sets up Webpack to import SVGs, WOFF files, TTF files, and WEBP files as paths and not data - Breaks everything that currently does this! 🫠

- Replaces almost every instance of font awesome icons in the codebase with shoelace icons (Bootstrap) - Adds the new brand assets! Replaces font awesome icons with `img` tags - Deletes all the old SVG imports, uses the new ones! - Removes the SVG loading animation - This will return at some point and it will be cool! I promise! - Minor nav bar icon grouping changes based on mockups - Navigation controls are now all on the left! Full screen has been moved to the right.

Caveats: Still missing the service worker page

- Accessibility improvements

- Changes the theme colour to be flush with the new white application bar

There's no way to actually load new web archives when this is hidden

- Updates help text with usage instructions - Adds copy button content description

This is used elsewhere, not a 1 line fix.

- Replaces the last `fa-icon` with an image and the new asset linking import -

- In line with when it shows and hides in the URL bar

- Fixes typo in fullscreen icon button name

Keeps bootstrap icons in the embed receipt.

Shrinks99 · 2024-04-04T20:22:17Z

@ikreymer Have reverted to Fontawesome and also updated to Fontawesome v6.

Can't have a double chevron, but this is close enough!

ikreymer · 2024-04-04T23:11:23Z

src/appmain.ts

@@ -741,18 +713,15 @@ export class ReplayWebApp extends LitElement {
                      IS_APP
                        ? html`
                            <p>
-                              ReplayWeb.page App is a standalone app for Mac,
-                              Windows and Linux that loads web archive files
+                              ReplayWeb.page is a standalone app for Mac,


This is less clear, 'archived items' is what we call things in our app, but what we are dealing with is allowing users to load web archive files, which we then refer to as archived items. In general, archived items could be anything, not related to web archives

ikreymer · 2024-04-04T23:12:17Z

src/appmain.ts

-                            is a browser-based viewer that loads web archive
-                            files provided by the user and renders them for
-                            replay in the browser.
+                            ReplayWeb.page is a browser-based viewer that loads


Same as above, let's revert this change. The link is useful for opening a link to our site when using the embedded mode.

Shrinks99 · 2024-04-05T00:45:43Z

Closing this PR, making a new one

Shrinks99 added 6 commits March 20, 2024 15:38

Adds favicons

bc54268

- Missing 3D manifest icons (WIP!)

Set up TsconfigPathsPlugin

13a8fe6

Adds ~assets directory, duped the setup in Browsertrix

"Mime Type" labels → "Media Type"

83fa908

Removes most remanence of fa-icon

29615c4

Caveats: Still missing the service worker page

Shrinks99 changed the base branch from main to dev-2.0.0 March 22, 2024 05:53

Shrinks99 added 17 commits March 22, 2024 16:21

Adds oxford comma

64faac0

Update logos

39f1ec4

Replace logo in Readme with updated dynamic logo

728bf7f

- Accessibility improvements

Adds custom caret-down icon

134df19

Adds new webmanifest app icons

56194d0

- Changes the theme colour to be flush with the new white application bar

Replace logo on loading screen

87ed91a

Enable load button on mobile

911d7cb

There's no way to actually load new web archives when this is hidden

Archives → Archived Items

e68ceaa

- Updates help text with usage instructions - Adds copy button content description

Update icon.icns

27677c4

Adds Windows / Linux icon

b3800c1

Revert copy button text change

2b5342b

This is used elsewhere, not a 1 line fix.

Cleans up old logo management code

0d1a5e8

- Replaces the last `fa-icon` with an image and the new asset linking import -

remove unused wrlogo id

59ceaff

Archive → Archived Item

1e58358

Archive → Archived Item (again!)

520e989

Hides menu capture date on tablet

0c50c98

- In line with when it shows and hides in the URL bar

Show navigation buttons on mobile

b9e097d

- Fixes typo in fullscreen icon button name

Shrinks99 requested review from SuaYoo, emma-sg and ikreymer April 1, 2024 22:04

Shrinks99 marked this pull request as ready for review April 1, 2024 22:04

Shrinks99 added 2 commits April 2, 2024 17:57

Remove unused import

93110e0

Revert to Fontawesome icons

1d5b8d1

Keeps bootstrap icons in the embed receipt.

Updates copy button icon

e76f9a4

Revert to angles icon for show hide header

ff9985e

Can't have a double chevron, but this is close enough!

ikreymer reviewed Apr 4, 2024

View reviewed changes

Shrinks99 closed this Apr 5, 2024

Shrinks99 mentioned this pull request Apr 5, 2024

2.0 UX Changes #295

Merged

Shrinks99 deleted the branding-updates branch April 10, 2024 21:00

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Branding updates, asset referencing scheme & Shoelace icons #292

Branding updates, asset referencing scheme & Shoelace icons #292

Shrinks99 commented Mar 22, 2024 •

edited

Loading

Shrinks99 commented Apr 4, 2024

ikreymer Apr 4, 2024

ikreymer Apr 4, 2024

Shrinks99 commented Apr 5, 2024

Branding updates, asset referencing scheme & Shoelace icons #292

Branding updates, asset referencing scheme & Shoelace icons #292

Conversation

Shrinks99 commented Mar 22, 2024 • edited Loading

Changes

Caveats

Screenshots!

Shrinks99 commented Apr 4, 2024

ikreymer Apr 4, 2024

Choose a reason for hiding this comment

ikreymer Apr 4, 2024

Choose a reason for hiding this comment

Shrinks99 commented Apr 5, 2024

Shrinks99 commented Mar 22, 2024 •

edited

Loading