NotionX / react-notion-x

Fast and accurate React renderer for Notion. TS batteries included. ⚡️
https://react-notion-x-demo.transitivebullsh.it
MIT License
4.87k stars 570 forks source link

Notion Icon aligned left. #266

Open EC-Sol opened 2 years ago

EC-Sol commented 2 years ago

Description

This is original notion page.

스크린샷 2022-04-12 오후 12 26 57

And then NotionRenderer result.

스크린샷 2022-04-12 오후 12 24 57

It caused by "left: 50%" in class "notion-page-icon-hero" at "react-notion-x/src/styles.css".

.notion-page-icon-hero {
  position: absolute;
  top: 0;
  left: 50%;
  display: flex;
  flex-direction: row;
  justify-content: center;
}

This is delete "left: 50%" result in browser.

스크린샷 2022-04-12 오후 12 38 37

Also "margin-left: -39px" in class ".notion-page-icon-hero.notion-page-icon-span " too problem.

.notion-page-icon-hero.notion-page-icon-span {
  height: 78px;
  width: 78px;
  margin-left: -39px;
}

This is delete "margin-left: -39px" result in browser.

스크린샷 2022-04-12 오후 12 41 45

Notion Test Page ID

Page ID: https://www.notion.so/React-Notion-X-List-Test-8cd35eb807b247f68d92d13238112a59

transitive-bullshit commented 2 years ago

Hey @EC-Sol 👋

Yeah, this is definitely something we should change to match the default notion behavior.

I think I had it this way because it's what I wanted for my blog 😂 but that should belong elsewhere.