updated styles for title text

akshatbhargava123 · Jul 29, 2019 · ec06ba7 · ec06ba7
1 parent 25d8aea
commit ec06ba7
Show file tree

Hide file tree

Showing 2 changed files with 25 additions and 2 deletions.
diff --git a/src/RootContainer.js b/src/RootContainer.js
@@ -152,11 +152,21 @@ class RootContainer extends React.Component {
  {id}
  </div>
  {this.state.selectedId === i && (
- <div style={{ display: 'flex', justifyContent: 'center' }}>
+ <div className="details-panel">
  {this.state.detailsLoading ? (
  <Loading />
  ) : (
- <h3>{this.state.focusedIdTitle}</h3>
+ <>
+ <h3>{this.state.focusedIdTitle}</h3>
+ <a
+ href={`https://www.rcsb.org/structure/${id}`}
+ rel="noopener noreferrer"
+ target="_blank"
+ className="title-text"
+ >
+ open RCSB page
+ </a>
+ </>
  )}
  </div>
  )}

diff --git a/src/style.less b/src/style.less
@@ -2,6 +2,19 @@
 
  font-family: sans-serif;
 
+ .details-panel {
+ display: flex;
+ justify-content: center;
+ flex-direction: column;
+ align-items: center;
+ border: 1px solid lightgrey;
+ padding: 10px;
+ .title-text {
+ font-size: 14px;
+ font-weight: 300;
+ }
+ }
+
  .error {
  display: flex;
  justify-content: center;