starred/BoostNote-App

Fork 0

mirror of https://github.com/BoostIO/BoostNote-App.git synced 2026-04-27 13:25:49 +03:00

[GH-ISSUE #449] Design overhaul of the shortcut suggestion on the landing page #216

New issue

Closed

opened 2026-03-03 00:19:22 +03:00 by kerem · 8 comments

kerem commented

2026-03-03 00:19:22 +03:00

Owner

Originally created by @tim-kt on GitHub (Apr 28, 2020).
Original GitHub issue: https://github.com/BoostIO/BoostNote-App/issues/449

Current design

The current landing page doesn't look that visually pleasing to me, compared to other editors like Visual Studio Code. In particular, I mean this section:

My idea

Visual Studio Code has this sleek design:

I created a sketch in Figma that I would suggest as a replacement for the current design, which is meant to be an improvement of the design, not necessarily the functionality. This is the current version:

You can check out my Figma project and leave comments here.

I wasn't able to find this particular section of code in repository, but if someone could point me to it, I'd also be willing to do the changes myself and create a pull request.

Environment

Desktop

Boost Note.next version 0.4.1
OS version and name: Ubuntu 18.04

Originally created by @tim-kt on GitHub (Apr 28, 2020). Original GitHub issue: https://github.com/BoostIO/BoostNote-App/issues/449 # Current design The current landing page doesn't look that visually pleasing to me, compared to other editors like Visual Studio Code. In particular, I mean this section: ![Screenshot from 2020-04-28 15-48-56](https://user-images.githubusercontent.com/23531625/80495124-cd773580-8967-11ea-820f-0a78b811f3a3.png) # My idea Visual Studio Code has this sleek design: ![Screenshot from 2020-04-28 15-49-51](https://user-images.githubusercontent.com/23531625/80495210-eb449a80-8967-11ea-968c-0d329c813143.png) I created a sketch in Figma that I would suggest as a replacement for the current design, which is meant to be an improvement of the design, not necessarily the functionality. This is the current version: ![image](https://user-images.githubusercontent.com/23531625/80648530-9a6c9900-8a70-11ea-97fd-944a660ff5de.png) You can check out my Figma project and leave comments [here](https://www.figma.com/file/TlY66fYctAlWXXrccLUWKX/Boost-Note?node-id=1%3A35). I wasn't able to find this particular section of code in repository, but if someone could point me to it, I'd also be willing to do the changes myself and create a pull request. # Environment ## Desktop - Boost Note.next version 0.4.1 - OS version and name: Ubuntu 18.04

kerem

2026-03-03 00:19:22 +03:00

closed this issue
added the
improvement request 🔨
label

kerem commented

2026-03-03 00:19:23 +03:00

Author

Owner

@jhdcruz commented on GitHub (Apr 28, 2020):

I wasn't able to find this particular section of code in repository, but if someone could point me to it, I'd also be willing to do the changes myself and create a pull request.

If I'm not wrong, it is located in: src/pages/NotePage.tsx in line 310-316.

currentNote == null ? (
  <StyledNoteDetailNoNote>
    <div>
      <h1>{t('note.createKeyMac')}</h1>
      <h1>{t('note.createKeyWinLin')}</h1>
      <h2>{t('note.createkeymessage1')}</h2>
    </div>
  </StyledNoteDetailNoNote>

The styling for the component is located in line 27:

export const StyledNoteDetailNoNote = styled.div`
  text-align: center;
  margin-top: 300px;
`

The text/strings are located in: src/locales/enUS.ts

export default {
	translation: {
	  ...
      'note.createKeyMac': 'Mac: Command(⌘) + n',
      'note.createKeyWinLin': 'Windows/Linux: Ctrl + n',
      'note.createkeymessage1': 'to create a new note',
	  ...
    }
}

I guess that's it. I really like your landing page though. I'll root for it. 👍

@jhdcruz commented on GitHub (Apr 28, 2020): > I wasn't able to find this particular section of code in repository, but if someone could point me to it, I'd also be willing to do the changes myself and create a pull request. If I'm not wrong, it is located in: `src/pages/NotePage.tsx` in `line 310-316`. ```ts currentNote == null ? ( <StyledNoteDetailNoNote> <div> <h1>{t('note.createKeyMac')}</h1> <h1>{t('note.createKeyWinLin')}</h1> <h2>{t('note.createkeymessage1')}</h2> </div> </StyledNoteDetailNoNote> ``` The styling for the component is located in `line 27`: ```ts export const StyledNoteDetailNoNote = styled.div` text-align: center; margin-top: 300px; ` ``` The text/strings are located in: `src/locales/enUS.ts` ```ts export default { translation: { ... 'note.createKeyMac': 'Mac: Command(⌘) + n', 'note.createKeyWinLin': 'Windows/Linux: Ctrl + n', 'note.createkeymessage1': 'to create a new note', ... } } ``` I guess that's it. I really like your landing page though. I'll root for it. 👍

kerem commented

2026-03-03 00:19:23 +03:00

Author

Owner

@tim-kt commented on GitHub (Apr 28, 2020):

All right, so I adjusted the colors to match the application and now I can't decide between dark and light buttons... I asked a few friends and they said that the light ones are better but I really like the dark ones, so I'll let the people here decide.

Here are the designs side by side:

I guess you can react with 🚀 for the dark buttons and with 🎉 for the light buttons.

Also, thanks @jhdcruz! I'll look into it.

@tim-kt commented on GitHub (Apr 28, 2020): All right, so I adjusted the colors to match the application and now I can't decide between dark and light buttons... I asked a few friends and they said that the light ones are better but I really like the dark ones, so I'll let the people here decide. Here are the designs side by side: ![Screenshot from 2020-04-28 21-00-48](https://user-images.githubusercontent.com/23531625/80526662-61122b80-8993-11ea-9941-d7be562f4c9b.png) I guess you can react with :rocket: for the dark buttons and with :tada: for the light buttons. Also, thanks @jhdcruz! I'll look into it.

kerem commented

2026-03-03 00:19:23 +03:00

Author

Owner

@tim-kt commented on GitHub (Apr 28, 2020):

Okay, I thought about my goal for the buttons and I think the user's focus should be on them rather than on the logo and since everything else in the application is pretty dark without white contrasts, I think I'll go with this version:

@tim-kt commented on GitHub (Apr 28, 2020): Okay, I thought about my goal for the buttons and I think the user's focus should be on them rather than on the logo and since everything else in the application is pretty dark without white contrasts, I think I'll go with this version: ![image](https://user-images.githubusercontent.com/23531625/80648530-9a6c9900-8a70-11ea-97fd-944a660ff5de.png)

kerem commented

2026-03-03 00:19:23 +03:00

Author

Owner

@Flexo013 commented on GitHub (May 1, 2020):

Loving this suggestion!

@Flexo013 commented on GitHub (May 1, 2020): Loving this suggestion!

kerem commented

2026-03-03 00:19:23 +03:00

Author

Owner

@tim-kt commented on GitHub (May 1, 2020):

I moved this to the old app, so I'm closing this issue here.

@tim-kt commented on GitHub (May 1, 2020): I moved this to the old app, so I'm closing this issue here.

kerem commented

2026-03-03 00:19:23 +03:00

Author

Owner

@jhdcruz commented on GitHub (May 5, 2020):

I've been quite interested in this particular improvement since this was closed. So I decided to continue this myself, if it's ok with the original author/idea @tim-kt.

I'm very eager to see this implemented.

@jhdcruz commented on GitHub (May 5, 2020): I've been quite interested in this particular improvement since this was closed. So I decided to continue this myself, if it's ok with the original author/idea @tim-kt. I'm very eager to see this implemented.

kerem commented

2026-03-03 00:19:24 +03:00

Author

Owner

@tim-kt commented on GitHub (May 5, 2020):

Sure thing, that's great to hear @jhdcruz!

I did a mockup in CSS and ended up with the following code for the different buttons:

.physical-button {
    /* Displays a rounded button with adjustable width and height... */
    display: inline-block;
    border-radius: 4px;
    background-color: #333333;
    /* ... with a "shadow" as its side. */
    box-shadow: 0 4px 0 #2B2B2B;
    
    /* Centers the text and makes the buttons equally high even though 
    the fonts differ. */
    text-align: center;
    line-height: 25px;
}

.physical-button-ctrl {
    /* Pretty, monospaced font */
    font-family: 'Source Code Pro', monospace;
    
    /* Puts some space between the text and the button's edges.*/
    padding-left: 8px;
    padding-right: 8px;
}

.physical-button-cmd {
    /* Monospaced fonts are cool, but symbols are not particularly big 
    and the ⌘ was really small. */
    font-family: 'Arial', sans-serif;

    /* More padding than on the Ctrl button because the overall width 
    should only be a little bit smaller */
    padding-left: 12px;
    padding-right: 12px;
}

.physical-button-n {
    /* Pretty, monospaced font */
    font-family: 'Source Code Pro', monospace;

    /* About the right amount of padding to create a nice square */
    padding-left: 10px;
    padding-right: 10px;
}

And to display the buttons:

<div class="physical-button physical-button-ctrl">
    Ctrl
</div>

<div class="physical-button physical-button-cmd">
    ⌘
</div>

<div class="physical-button physical-button-n">
    N
</div>

I also adjusted the color of the buttons' sides and they are now darker than the background (which is how it looks like in real life, if you look down at your keyboard).

@tim-kt commented on GitHub (May 5, 2020): Sure thing, that's great to hear @jhdcruz! I did a mockup in CSS and ended up with the following code for the different buttons: ```css .physical-button { /* Displays a rounded button with adjustable width and height... */ display: inline-block; border-radius: 4px; background-color: #333333; /* ... with a "shadow" as its side. */ box-shadow: 0 4px 0 #2B2B2B; /* Centers the text and makes the buttons equally high even though the fonts differ. */ text-align: center; line-height: 25px; } .physical-button-ctrl { /* Pretty, monospaced font */ font-family: 'Source Code Pro', monospace; /* Puts some space between the text and the button's edges.*/ padding-left: 8px; padding-right: 8px; } .physical-button-cmd { /* Monospaced fonts are cool, but symbols are not particularly big and the ⌘ was really small. */ font-family: 'Arial', sans-serif; /* More padding than on the Ctrl button because the overall width should only be a little bit smaller */ padding-left: 12px; padding-right: 12px; } .physical-button-n { /* Pretty, monospaced font */ font-family: 'Source Code Pro', monospace; /* About the right amount of padding to create a nice square */ padding-left: 10px; padding-right: 10px; } ``` And to display the buttons: ```html <div class="physical-button physical-button-ctrl"> Ctrl </div> <div class="physical-button physical-button-cmd"> ⌘ </div> <div class="physical-button physical-button-n"> N </div> ``` I also adjusted the color of the buttons' sides and they are now darker than the background (which is how it looks like in real life, if you look down at your keyboard).

kerem commented

2026-03-03 00:19:24 +03:00

Author

Owner

@Rokt33r commented on GitHub (May 10, 2020):

Resolved in #458. I might add more modification but I like the suggestion! Thanks for contributing!

@Rokt33r commented on GitHub (May 10, 2020): Resolved in #458. I might add more modification but I like the suggestion! Thanks for contributing!

kerem referenced this issue

2026-03-03 00:22:39 +03:00

[PR #216] [MERGED] All notes in Sidebar #669

No milestone

No project

No assignees

1 participant

Notifications

Due date

The due date is invalid or out of range. Please use the format "yyyy-mm-dd".

No due date set.

Dependencies

No dependencies set.

Reference

starred/BoostNote-App#216

No description provided.

Rows
Columns